Need help? Check out our Support site, then


disable responsive width

  1. verbsandvignettes
    Member

    hello,

    i'm looking to "turn off" the responsive width structure for the truly minimal theme. i have custom css. blog i'm working on: http://verbsandvignettes.wordpress.com/

    i found something here for a different theme: http://en.forums.wordpress.com/topic/twenty-eleven-theme-disable-responsive-structure. when i try using this in my css, the content doesn't break properly, and instead writes over the right sidebar.

    thank you for any help you can give.

    The blog I need help with is verbsandvignettes.wordpress.com.

  2. Hi there, CSS is generally theme specific, so that is why the CSS you found didn't work on your theme.

    Give this a try by pasting it at the end of your existing custom CSS and see what you think.

    .site-main {
    position: relative;
    width: 955px;
    }
    
    .site-main .widget-area {
    width: 286px;
    position: absolute;
    right: 0;
    top: 0;
    }
    
    .site-header, .navigation-main, .site-footer {
    width: 955px;
    }
    
    .content-area {
    width: 668px;
    }
  3. verbsandvignettes
    Member

    thank you for the help! i did assume most of it would be theme-specific, but i wanted to try.

    i'm not exactly sure yet. it looked like it made the content width narrower in one browser, but didn't change much elsewhere.

    is there also a way to keep the sidebar on the side instead of kicking down to the bottom? that was the other detail i didn't like about responsive width themes, since there's plenty of space for viewing on, say, my ipad.

    i'm sorry. i know i should know more about css before posting. i appreciate your help! i read about the "!important" attribute, but i don't want to start messing things up on my own.

  4. Here is a great article on responsive design.
    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

    At 800 pixels your sidebar gets bumped down.

    Try this.

    @media screen and (max-width: 800px) {
    .site-main .widget-area {
    float: right;
    clear: none;
    width: 30%;
    }
    .site-content {
    clear: none;
    float: left;
    margin: 0 34% 0 0;
    width: 66%;
    }
    
    }

    Then you are going to have to pick a pixel with if you want it to get bumped on smaller screens like iPhone. So you would need to pick a pixel width and add the responsive styles back in. I'll use 600px as a starting point but you can change it to whatever size you like.

    @media screen and (max-width: 600px) {
    .site-main .widget-area {
    float: none;
    clear: both;
    width: 100%;
    margin: 0 auto;
    }
    .site-content {
    clear: both;
    float: none;
    margin: 0 auto;
    width: 100%;
    }
    
    }
  5. verbsandvignettes
    Member

    thank you for the help! and for the article; i'll be reading it a few times.

    800 px seemed to work very well on an ipad, and i set the second part to 500 px to bump down on an iphone screen.

    any idea on how to correct the background "dots" when the sidebar is floating right on the ipad?

    here is a screenshot of this new issue: http://verbsandvignettes.files.wordpress.com/2013/08/photo1.png.

    and where i was given the css for this originally: http://en.forums.wordpress.com/topic/removing-lines-truly-minimal-theme?replies=10.

    if i should post this question elsewhere, please just let me know.

  6. I see the problem. This took me a while to find but I got it. :)

    Add this to your 800px code. There are brackets { } that surround all the code that applies to the 800px screen size. This can go anywhere in there.

    .site-main {
    background: none;
    }

    This will be hidden even at the 500px width so you don't need to add it twice.

  7. verbsandvignettes
    Member

    everything is looking awesome! seriously, thank you again for all of your help.

  8. You are welcome. Happy blogging!

Topic Closed

This topic has been closed to new replies.

About this Topic