Sidebar not responsive

[SimplyAA]

My sidebar on my blog page here http://www.freespiritwebistes.com/blog shows up correctly on all devices I have tried except:

When I view on an iPad or iPad mini it shows up correctly when view in portrait. But when you turn the iPad horizontally the sidebar moves to the right side of the page when it should be to the left side.

The strange thing is, when I view it here on the responsive view in Studio Press it looks correct.

http://www.studiopress.com/responsive/

(I am using the Mocha theme)

---

Angela

[Tom]

In your media query at 1200px it appears that you're adding margin-left trying to make your content lie to the right of the center portion of the background image - i.e. not overlap, which would make the text difficult to read. <-- Please speak up if I'm off the mark on this :). But this leaves not enough room for the sidebar..

If you shave the added margin of 20px off the content width, the sidebar doesn't need to move (Until @media 800px, when you will run into a text/image conflict anyway from this point and smaller widths.)

so

.content-sidebar #content,
	.sidebar-content #content {
		width: 610px;
            etc .....

I think it may be a problem at 1024px because the sidebar begins to be obstructed -- but there is no media query at 1024px. I guess you could design your own.

You should also look at your menus and header image - the larger header image seems to cause problems for the menus between 1200px and 800px. See some of the resources @Chantal2012 used towards the bottom of this thread: http://www.studiopress.community/topic/logo-and-lifestyle-pro/

Does this help?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[SimplyAA]

Thanks for the response. I took off the added margin of 20px and the sidebar fits now. Thanks!

I would like to just remove the large background image on mobile devices and have tried adding a few things but nothing worked. Do you know how to take the image off for mobile devices and just have a color?

I tried:

in this section of CSS @media only screen and (max-width: 800px) I tried:

body {
background-image: none;
background-color: red;
}

but it didn't work.

---

Angela

[Tom]

In the 800px media query:

body.custom-background {
background-image: none !important;
background-color: red !important;
}

( Sorry, but red ?? 🙂 )

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[SimplyAA]

Thank you for very much for you help. It worked great!

---

Angela

[Author]

Posts