Help me fix mobile viewing! Messed up after changing sidebar

  • Resolved prakin

    (@prakin)


    9 years, 3 months ago

    My site is https://www.queenbeeofhoneydos.com
    I use the Sela theme, and I needed to change the sidebar from 250px to 300px. So, I adjusted the content down by 50px and the sidebar up by 50px in the css editor using this code. 

    .content-area {
	float: left;
	width: 715px;
}

.sidebar-widget-area {
	width: 300px;
}

    Everything looks good on my Mac,but now my mobile devices show that the background is overwhelming the right half of the page, and the header, navigation and white page portion has been shoved to the left. Obviously, what I did messed up the mobile view, but I am not sure how to go about fixing this without going back to the 250px sidebar.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @prakin!

    To make it not affect mobile, you need to wrap your CSS in screen width check:

    @media screen and (min-width: 1180px) {
    .content-area {
        float:left;
        width:715px;
    }

    .sidebar-widget-area {
        width: 300px;
    }
}
    Thread Starter prakin

    (@prakin)

    Well, don’t I feel stupid. ?? I knew that. (sort of)
    Thanks Gary. I would have been beating myself up all night before I figured it out. Seems like it’s always something simple.

    I’m glad I could help you avoid spending all night on it, then! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Help me fix mobile viewing! Messed up after changing sidebar’ is closed to new replies.