WordPress.org

Forums

Resizing Page causes second column to fall to the bottom of the page (8 posts)

  1. pkelly94
    Member
    Posted 2 years ago #

    I am running a child theme from Twenty Eleven for my website: http://theup-turn.com/ and recently realized that when the page is shrink to a certain point, the widget bar falls below the main content. I had previously fixed the problem, however, it reappeared a few days ago.

    Here is all the CSS coding I have for the content, primary and secondary:

    #content {
    width:509px;
    margin:0 34% 0 8%;
    }

    body {
    background-color:#F7F7F7;
    }

    #page {
    border:2px solid #69c;
    width: 1000px
    }

    #secondary {
    width:300px;
    margin-right:4%;
    }

    #primary {
    width:600px;
    }

    Can anyone help me figure out what is wrong?

  2. paulwpxp
    Font hero
    Posted 2 years ago #

    Twenty Eleven is a so called responsive theme. The reason that sidebar falls down because mediaquery tells it to do in certain breakpoint, this is by design, so that users in small screen can view content.

    Also, Twenty Eleven sets the width of content with % not px, so you will have to learn how the theme works before customizing it.

    I would recommend taking out any references of content widths in your childtheme, because the theme's layout is already nice and solid, don't mess with it unless you know what you are doing.

    But if you decide to keep going like this, just take a look at the media queries used in parent's theme CSS, redeclare it in your child's and adjust to suit your need.

  3. pkelly94
    Member
    Posted 2 years ago #

    Thank you,

    Do you know which line(s) of code I should adjust?

  4. pkelly94
    Member
    Posted 2 years ago #

    I'm not very familiar with what media queries are

  5. paulwpxp
    Font hero
    Posted 2 years ago #

    Do you know which line(s) of code I should adjust?

    Actually, if you ask this question, you are not capable of doing the modification just yet. It's like if you don't know how the car works, will you mod the car yourself ? no, right? you gonna ask or hire someone how know this stuff, right ?

    But, we all have to start somewhere, so if you want to tackle with it live on your site, then look here.
    http://themes.trac.wordpress.org/browser/twentyeleven/1.5/style.css#L2283

    Notice the comment saying Responsive Structure, below that comment, inside mediaquery (@media (max-width: 800px)), you will see the #main #secondary is given a width:auto; along with some adjustments. Now if you don't want the fall down behavior in screen smaller than 800px, just delete the whole thing there.

    Read the CSS file carefully and thoroughly, it's well commented, and do some researh on CSS mediaqueries, it's not easy but it's not rocket science.

  6. alchymyth
    Forum Moderator
    Posted 2 years ago #

    it is this style, near the start of the 'responsive section':

    /* =Responsive Structure
    ----------------------------------------------- */
    
    @media (max-width: 800px) {
    	/* Simplify the basic layout */
    ...
    ...
    	#main #secondary {
    		float: none;
    		margin: 0 7.6%;
    		width: auto;
    	}
    ...

    compensate that for instance by adding this at the end of style.css in you child theme (make sure to close that open last existing style first):

    @media (max-width: 800px) {
    	/* Simplify the basic layout */
    	#main #secondary {
        float: right;
        width:300px;
        margin-right:4%;
       }
    }

    for further ideas about keeping the sidebar in its position in narrow browsers, see my article http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-adaptations-for-hand-held-devices

  7. pkelly94
    Member
    Posted 2 years ago #

    Thanks! That fixed the floating sidebar problem! The only problem is now in the "Holla" section where we have links to our media pages the images fall into separate rows when the page is shrunk too much. It's not a huge problem but if y'all have any recommendations for how to fix it that'd be great!

    http://theup-turn.com/

    -PK

  8. alchymyth
    Forum Moderator
    Posted 2 years ago #

    add:

    @media (max-width: 650px) {
      #text-3 .alignleft
    	 {
    		display: inline;
        margin: 0 1.6em 0 0;
    	}
    }

Topic Closed

This topic has been closed to new replies.

About this Topic