WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme - Twenty Eleven] how to prevent elements moving when broswer window (15 posts)

  1. DW83
    Member
    Posted 2 years ago #

    Hi,

    I'm using a child theme based on twenty eleven, and I'd like to try to fix everything in place on the page, so that the content doesn't shift when the browser window is resized.

    My blog is here. Please let me know if you'd like me to paste in any relevant code.

    Currently I've managed to get the header and menu bar to stay in place. For the rest, I've begun setting positions to 'absolute' and changing percentage widths to pixel widths. (width is currently 1000px; this is probably too wide and I'll need to change later, but I guess that's a separate problem).

    You'll see that the sidebar currently moves when the window is resized, and it also overshoots the footer, rather than pushing it down. This is noticeable on pages, like here.

    Code for the sidebar is:

    #secondary {
    	float: right;
    	position: absolute;
    	margin-left: 736px;
    	margin-top: 50px;
    	margin-right: 76px;
    	width: 188px;
    }

    Any suggestions on how to fix everything in position would be much appreciated.

    Many thanks.

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    that behaviour is intended; but obviously, the changes you have made to style.css so far, seem to be in conflict with it.

    possibly, you can remove all styles starting from:

    /* =Responsive Structure
    ----------------------------------------------- */
    
    @media (max-width: 800px) {

    all the way down to just before:

    /* =Print
    ----------------------------------------------- */

    (leave this last bit in place)

    ps:
    some of the behaviour might also be caused by the validation errors that you have introduced into the theme (example validation report of the page in your link):
    http://validator.w3.org/check?uri=http%3A%2F%2Fwhynotburnbooks.com%2Flinks%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  3. DW83
    Member
    Posted 2 years ago #

    Thanks! I tried removing that section, but it seemed to throw everything out of position. The individual posts expanded to fill the width of the screen, and the sidebar appeared on the left, laid over everything else...

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    but it seemed to throw everything out of position.

    i only checked that in the example linked page;

    quite unlikely that the change would have such an effect, as these styles only come into action at narrower browser screen widths.

    there seems to be something more severely wrong in your theme.

    have you checked what i addad as a post-scriptum to my earlier response?

    ps:
    some of the behaviour might also be caused by the validation errors that you have introduced into the theme (example validation report of the page in your link):
    http://validator.w3.org/check?uri=http%3A%2F%2Fwhynotburnbooks.com%2Flinks%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  5. DW83
    Member
    Posted 2 years ago #

    Thanks. I'm not really that experienced, so I don't quite understand those validation errors, although by the looks of it they relate to the fact that I've used a columns plugin to structure the text on that particular page.

    The layout / resizing problem occurs across all pages on the site, not just that page, so I expect it's caused by something (or multiple things) in the stylesheet, rather than by anything restricted to that one page.

    I've pasted the full 'structure' section of the css here: http://pastebin.com/VVmpACL5 in case that's of any help.

    If anyone can see any errors in that code that might be causing the problem, please do let me know.

    It's worth pointing out that I haven't altered anything in the 'colophon' section of the stylesheet, as I'm not quite sure what to alter. That might be the reason why the footer doesn't get pushed down under the sidebar.

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    The layout / resizing problem occurs across all pages on the site, not just that page, so I expect it's caused by something (or multiple things) in the stylesheet,

    there seem to be three causes:

    a:
    the use of postion: absolute; in the style of #secondary:

    #secondary {
    	float: right;
    	position: absolute;
    	margin-left: 736px;
    	margin-top: 50px;
    	margin-right: 76px;
    	width: 188px;
    }

    i would suggest to change this to:

    #secondary {
    	float: right;
    	margin-top: 50px;
    	margin-right: 76px;
    	width: 188px;
    }

    b:
    the 'Responsive Structure' styles of the original theme;
    my suggestion, as before, remove those.

    c:
    an unneccassry padding on the header image:

    #branding img {
    	height: auto;
    	margin-top: -20px;
    	margin-left: 48px;
    	padding-right: 200px;
    	margin-bottom: -50px;
    	width: 940px;
    }

    remove padding-right: 200px;

    only evaluated in firefox with the web developer add-on; there might be other issues in other browsers.

    if you should make the changes, and are not immediately satisfied with the results, but want further suggestions, please leave the changes in your site until someone had the opportunity to cross-check them, and to comment on them.

  7. DW83
    Member
    Posted 2 years ago #

    Thanks v much. I've implemented those changes. They do seem to have fixed a few things. The footer is now pushed to the bottom of the page, as it should be, and none of the elements move on resizing the browser window.

    However, the posts now extend across the full width of the page, and the sidebar is pushed down below them.

    I've left the changes in, in case anyone can take a look at them.

    Any help in getting the sidebar back where it should be would be much appreciated.

    Thanks!

  8. DW83
    Member
    Posted 2 years ago #

    Ah, false alarm - I had only commented out the responsive structure section, rather than deleting it. Have deleted it now, and the problem's fixed. Thanks again!

  9. Joshua Lorenz
    Member
    Posted 2 years ago #

    Hi DW83,

    I was wondering if you could tell me how you got the header and menu bar to stay in place,

    That's exactly what I want to do and Just cant work out what I need to do.

    Regards

  10. Joshua Lorenz
    Member
    Posted 2 years ago #

    Hi DW83,

    I was wondering if you could tell me how you got the header and menu bar to stay in place,

    That's exactly what I want to do and Just cant work out what I need to do.

    Regards

  11. kremo5le
    Member
    Posted 2 years ago #

    Joshua,

    Add min-width: 1000px AND max-width: 1000px to #page within the CSS. You might have fixed this already but I wanted people to know how to do it. You do not have to modify anything else if you do this AND remove the responsive code off the CSS.

  12. jamonavich
    Member
    Posted 2 years ago #

    Just wanted to add a word of thanks to kremo5le and alchymyth. By your powers combined I am no longer frustrated!

    Thanks folks.

  13. Eric1984
    Member
    Posted 2 years ago #

    ditto, kremo5le's comment was a godsend

  14. Kevin Rape
    Member
    Posted 1 year ago #

    Using kremo5le's information is good, but if the person resizes the width of the browser, the sidebar (on the right) drops below all the posts (as well as the comment bubbles). I've had this problem with the twentyten theme as well and fixed it on both.

    In the standard style.css file, all you have to do is:

    1. Copy/Paste the original code into a text editor
    2. Find/Replace all the "max-width" (without quotes of course) with "width" (again, without quotes).
    3. Copy/Paste the corrected code back into your WordPress style.css
    4. Click Save.

    I've tested it on long menus, and the sidebar and it works. I only have an iphone, so I can't test with the other mobile devices.

    To The Top,
    Kevin Rape (I have an awesome last name :) )

  15. pkelly94
    Member
    Posted 1 year ago #

    I have read through this forum and tried out a bunch of the solutions, however, I still am having trouble with resizing my page. Simply, when I shrink my page the widget/sidebar drops below the main content even though there is still room for it to the right of the content.

    My blog is: http://theup-turn.com/

    My CSS for the secondary is:

    #secondary {
    max-width:300px;
    min-width:300px;
    margin-right:36px;
    float:right;
    }

    I can post more CSS if needed but if someone could help make the widget area stay at the right when the page is shrunk that'd be great!

    -PK

Topic Closed

This topic has been closed to new replies.

About this Topic