Need help? Check out our Support site, then


Adjusting responsiveness in Twenty Eleven

  1. 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:

    http://mabelkwong.com/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 mabelkwong.com.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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%;
    }
  7. Thank you so much, hallluke. That worked.

    Really appreciate it.

  8. 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!

  9. 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 :)

Topic Closed

This topic has been closed to new replies.

About this Topic