Sidebar vs Primary Content Area width

  • Unknown's avatar
    thebombayreview2014 · Member ·

    Hello all,

    We wanted to decrease the sidebar widget area, and added this CSS code:

    #secondary.widget-area{
    width:25%;
    }
    #primary.content-area {
    width: 73%;
    }

    While this worked perfectly on desktop view, the mobile version got completely messed up. The entire content shows at like half the width on the mobile. I don’t want this to be activated on mobile view. I did make sure I had unchecked the box – Include the CSS in the mobile theme. In fact I tried doing both.

    Please help me with this. If there is a different CSS code I should apply, let me know that too. Thanks, and hope you are safe.

    Website is: http://www.thebombayreview.com

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

  • staff-mckluskey · Staff ·

    Hi there!

    You will want to add Media Queries to your CSS code to limit the changes to bigger screens only.

    So, you’ll want to try something like

    @media screen and (max-width: 800px) {
#secondary.widget-area{
width:25%;
}
}
@media screen and (max-width: 800px) {
#primary.content-area {
width: 73%;
}
}

    Of course, you’ll want to replace the 800px with a number relevant for your theme, where your code starts breaking the site.

    Here’s more information:

    https://wordpress.com/support/custom-design/custom-css-media-queries/

    Also, remember that with your plan you can access Live Chat directly via https://wordpress.com/help/contact. That way you can get help faster.

  • The topic ‘Sidebar vs Primary Content Area width’ is closed to new replies.