Adjusting width of singular posts in Twenty Eleven

  • Unknown's avatar
    themabelkwong · Member ·

    Hi,

    I’ve been adjusting the width of my blog posts and sidebars using some CSS code:

    #page {
    max-width: 1100px;
    }

    #primary {
    margin: 0 -28.2% 0 0;
    width: 100%;
    }

    #content {
    margin: 0 35.2% 0 4.6%;
    width: 60.2%;
    }

    #secondary {
    margin-right: 4.6%;
    width: 23.6%;
    }

    So currently the width of my blog posts on the home page is 662.2px. I want this to be width of the blog posts on the singular pages too. This is the code I used to get that:

    .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
    width: 662.2px;
    padding: 0;
    }

    However, when I click on tablet view, you’ll see that the post isn’t centred well in the page (skews to the left). (Same goes for the comments at the bottom, but I’m certain I mucked up the CSS comments code somewhere).

    I’ve tried changing the singular width to a percentage, but I don’t know what percentage is equivalent of 662.2px? I’ve tried setting it to 75% and the width of the singular posts is close to what I like – but then the left and right margins seen in tablet view are large and I want to make them smaller.

    Any help will be much appreciated. The blog I need help with is http://www.mabelkwong.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    nizamilputra · Member ·

    Hi there,

    Lets try to use max-width instead of width; 

    .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
  width: 662.2px;
  padding: 0;
}

    We also need to adjust comment list; 

    .commentlist > li.comment {
  max-width: 625px;
}

    I hope it will helps you.

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for that, nizamilputra. I think you left out a ‘max’ in the first code. So I tried this:

    .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
    max-width: 662.2px;
    padding: 0;
    }

    I found that by using max-width, the width of my singular posts became narrower than 662.2px. When I tried to increase the max-width, say to 700px, the width of the singular posts remain the same. It solves the big margin spaces in the tablet view, though.

    Do you think there’s a way around this?

  • Unknown's avatar
    nizamilputra · Member ·

    Oops sorry, I forgot put “max”. But if it didn’t work, then lets try with width in percent. Put width: 71.051502146%, it’s actually 663px.

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks, nizamilputra. The percentage works nicely. When I switch it to tablet view, however, there are two large white margins or spacing on the left and right. Is it possible to make the spaces less?

    I was wondering – how did you calculate the percentage? I was trying to figure that out.

  • Unknown's avatar
    nizamilputra · Member ·

    there are two large white margins or spacing on the left and right. Is it possible to make the spaces less?

    I think we need to add media query for specific screen resolution

    @media (max-width: 768px){
  width: 100%;
}

    I was wondering – how did you calculate the percentage? I was trying to figure that out.

    That came form 632.2/933*100. 933px is width of parent element, in this case “.post“. I can figure it out by inspecting that element via web inspector. https://cloudup.com/cblUk-ypAnJ :)

  • Unknown's avatar
    nizamilputra · Member ·

    Oops sorry, this code is the correct one; 

    @media (max-width: 768px){
  .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
     width: 100%;
  }
}
  • Unknown's avatar
    themabelkwong · Member ·

    Thanks, Nizamilputra, you are very kind :D

    Thank you for the percentage explanation. It took me forever to find the 933px in Developer Tools or web inspector, and I was looking for this before :( So I tried again and mouses all over the page, and the 933px finally come up when I moused in the middle of the post:
    http://mabelkwong.com/?attachment_id=3717

    I put in the codes. Now the width is great. But the white margins are still quite big in tablet view:
    http://mabelkwong.com/?attachment_id=3718

    The comments section also don’t seem to bunch up nicely too in tablet view:
    http://mabelkwong.com/?attachment_id=3719

    Is there are work-around?

  • Unknown's avatar
    nizamilputra · Member ·

    I don’t see that css code on your CSS, when I put the code via web inspector, it works https://cloudup.com/czGxycymwPK

    Then lets try to change width of comment list into auto https://cloudup.com/cqN5NTYKnMD. So the complete CSS will be like this;

    @media (max-width: 768px){
  .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
     width: 100%;
  }
}

.commentlist > li.comment {
  width: auto;
}

    Try to add that code again to you CSS.

  • Unknown's avatar
    themabelkwong · Member ·

    I have put in the codes as suggested. And saved. So that went through. But in tablet view the wide spaces to the left and right are still showing on my end:

    CSS tablet 2

    The white spaces tends to bunch up some of the comments in tablet viewing. So the lesser white space in tablet viewing, the better.

    Is there a workaround?

  • Unknown's avatar
    nizamilputra · Member ·

    I think actually it works. Please try to open on your real device/tablet or you can use this http://www.responsinator.com/

    And you can add some setting on 1024px screen (iPad landscape) with this;

    @media (min-width: 768px) and (max-width: 1024px){
  .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
     width: 672px;
  }
}
  • Unknown's avatar
    designsimply · Member ·

    I checked http://mabelkwong.com/ just now for a tablet view, and I don’t see the extra spaces to the right and left of the post content area as shown in http://mabelkwong.com/?attachment_id=3721 so it looks like you were able to get this working.

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for that, nizamilputra. And designsimply. I’ve had a look at the screenshots, and viewed my blog in tablet view again and it looks great. I also had a look at it on a few tablets at a few shops yesterday (I don’t own a tablet) and all looks good :) It wasn’t showing up like that before, I don’t know why.

    I plan on extending the width of individual posts soon, and I will adjust the codes where I see fit.

    Thanks!

  • The topic ‘Adjusting width of singular posts in Twenty Eleven’ is closed to new replies.