Mobile Tablet Theme: Widget Area being cut off

  • Unknown's avatar
    kleankuisine · Member ·

    Hi,

    My sidebar that contains my widgets is being cut off when I view my site on a tablet or on my phone. How can I fix this with custom CSS?

    Thanks!
    Anan

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

  • Unknown's avatar
    designsimply · Member ·

    That problem is happening because of the following custom CSS that you added to your Appearance > Customize > CSS editor:

    .site-main .widget-area {
	background: #fff;
	float:right;
	margin:0;
	width:29.411764705%;
}

    One way to fix it would be to only apply that rule to large screens. You can limit CSS to certain screen sizes using media queries.

    This page has an explanation about media queries if you’d like to take a look:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    So in the case of the rule above, you can limit it to large screens by copying one of the media query rules from the original theme CSS. I found the rule for you:

    @media screen and (max-width: 63.750em) {
    /* put any CSS here you want to limit to screens that are about 640px or wider */
}

    Erase the comment and add any CSS there that you want to apply only to large screens so it doesn’t break the mobile view.

  • Unknown's avatar
    kleankuisine · Member ·

    Thank you!
    Editing CSS is trial and error for me and I didn’t know that code changed the appearance on mobile and tablet.

  • Unknown's avatar
    designsimply · Member ·

    I always try to start people out with answers but also try to provide resources for learning more too.

    Your site looks great! I think you’re doing wonderfully with the CSS.

  • The topic ‘Mobile Tablet Theme: Widget Area being cut off’ is closed to new replies.