• Hi there,

    I’m working with a Twenty Eleven child theme. I’m no CSS expert, so I’m kind of making this up as I go along. I’m trying to figure out why the header of my top post on the posts page (https://eldestonly.com/news/) is so close to the border above it. I’m not having this issue on any other pages, and I can’t figure out how to move it down without moving down everything on my other pages (which then makes the content on the other pages too low).

    Help? Please?

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)
  • From a quick inspection, both of the titles got the same layout property, the one on the posts page looks more to the top because it has “FEATURED” text above it.

    We can put some space there to make it look not that close.

    .blog #content { padding-top: 25px; }

    On a separate issue, the navigation’s property isn’t right, it causes horizontal scrollbar to the whole page.

    Thread Starter stephshore04

    (@stephshore04)

    PERFECT! Thank you so much!

    And ahhhh, is that why I’m getting that scrollbar?! I’ve been trying to figure it out for hours. I just wanted to be able to control the placement of the nav, but I guess I went about it the wrong way … Any chance you know off the top of your head what I’ve done wrong? If it’s too complicated to explain, that’s all right — I’m just happy to know what caused the horizontal scroll!

    Thank you again!

    Thread Starter stephshore04

    (@stephshore04)

    I changed the #access width to 60% and that got rid of the scrollbar! Was that the right way to do it, or did I just mess it up more? My nav doesn’t all fit on one line on iPhone or iPad now, but I suppose I can live with that…

    There are few things goin on here.

    First, you got min width on page, as if you want it to be fixed width design ? If that’s so, you should overwrite header.php taking off this

    <meta content="width=device-width" name="viewport">

    Secondly, your child theme stylesheet use duplicated parents style, as opposed to use @import to include it and make additional changes down below. The duplicated parent style making it hard to debug.

    As it is now, try remove this

    #access {
    background: transparent 0 0 no-repeat; /* Show a solid color for older browsers */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    clear: both;
    display: block;
    margin: -17px 429px 6px;
    width: 60%;
    position:absolute;
    top: 86px;
    
    }

    And put this in instead

    #access {
    	background: none;
    	box-shadow: none;
    	float: right;
    	margin: -50px 10px 0 0;
    	width: auto;
    }

    Thread Starter stephshore04

    (@stephshore04)

    THANK YOU!! I was using @import before, but then I needed to completely remove some code (the responsive portion — that’s why it’s fixed width), so I just pasted it all on top of my updated code. I just cleaned it up and then made your suggested changes, and I think that fixed my problems! Thank you so so so so much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Twenty Eleven: Posts page padding’ is closed to new replies.