disable responsive width

  • Author
    Posts
  • #1407650

    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: https://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.

    #1407721

    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;
    }
    #1407731

    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.

    #1407734

    mrdirby
    Member

    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%;
    }
    
    }
    #1407738

    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: https://en.forums.wordpress.com/topic/removing-lines-truly-minimal-theme?replies=10.

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

    #1407740

    mrdirby
    Member

    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.

    #1407745

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

    #1407746

    mrdirby
    Member

    You are welcome. Happy blogging!

The topic ‘disable responsive width’ is closed to new replies.