Adjusting responsiveness in Twenty Eleven

  • Unknown's avatar
    themabelkwong · Member ·

    Hi there,

    I recently made some changes to the CSS of my blog, in particular to the width of the individual blog posts and sidebar too. I have set the max width of the page to be 1100px with the code:

    #page {
    width: 1100px;
    }

    When I’m viewing my blog in tablet view under the Customisation tab, my blog does not resize accordingly as below:

    blog responsiveness

    Previously I had some assistance in this forum:

    https://en.forums.wordpress.com/forum/css-customization#postform

    If anyone has a suggestion to fix this, that would be much appreciated.

    Thanks! My blog is at mabelkwong.com.

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

  • Unknown's avatar
    hallluke · Member ·

    If you want your custom CSS to only apply to certain screen sizes you need to use media queries.

    You have about 600 lines of CSS so it’s a bit tricky to check through everything to see what might need to be placed inside the media query. I have a feeling that if you just get rid of the:

    width: 1100px;

    line but leave the max-width set then you should get the best of both worlds. Try it out and let me know.

  • Unknown's avatar
    themabelkwong · Member ·

    When I remove #page { width: 1100px; } the width of my content/blog posts and sidebar both shrinks. I’m not sure why this is the case.

    If there is a workaround or another suggestion, maybe I can try that.

    Thanks.

  • Unknown's avatar
    thesacredpath · Member ·

    Change your width to 100% instead of 1100px. The 1100px value is a static value and will hold the width to that. If you use 100%, the width of #page will stay at the max-width value until the window becomes narrower than that and the it will smoothly narrow as needed on screens/windows narrower than 1100px.

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for the suggestion, thesacredpath. I set the width to 100%, and now when I view my blog in tablet and mobile format, all looks good.

    However, I notice that the comments on each individual post still stretch across that page. That is, in tablet and mobile view, I have to scroll all the way to the right to read the comments.

    Is there a way to fix this?

    Thank you so much.

  • Unknown's avatar
    hallluke · Member ·

    I think this will fix the issue for smaller screen sizes, let me know if it causes any unexpected issues:

    .commentlist > li.comment {
	width:100%;
}
  • Unknown's avatar
    themabelkwong · Member ·

    Thank you so much, hallluke. That worked.

    Really appreciate it.

  • Unknown's avatar
    hallluke · Member ·

    Great news, your site looks great, it’s a good example of what you can do with CSS on WordPress.com and based on the number of people replying to your posts it’s really popular!

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for the kind words. It took me a while to get my blog the way I want it to look. While I struggled a lot with finding the right code, it was fun experimenting and learning what it all means – made all the more fun with such a supportive forum here on WordPress.com.

    I recently got approved for WordAds, and that didn’t agree with my customisation for some reason. But thanks to help here, my blog looks good now :)

  • The topic ‘Adjusting responsiveness in Twenty Eleven’ is closed to new replies.