Mobile Devices

[Claire Watson]

Hi! I have seen a few posts about mobile devices, but non seem to get me the results I need.

Ultimately, I do have some content on my home page, and when on mobile it just looks sloppy and layered and the navigation doesn’t work. All I seek is the logo on top, then working navigation, then widgets, then content neatly under it all. Can you help me with that?

Thanks!

Claire

[Bill Robbins]

Hello Claire,

Thank you for your business first of all. Great question too. I took a look at your site and did see the content box sitting on top of your content like that. I believe this spot in your Custom CSS is causing that:

#content {
	width: 660px;
	color: #fff;
	padding: 0px;
	position: absolute;
	top: 0;
	min-height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

Since the width and positioning are set there, after the main stylesheet, they override the layout for the main content at smaller sizes. It looks like the only item changed there is the background opacity. Let’s try this. Change that snippet above to be like this:

#content {
	background-color: rgba(0, 0, 0, 0.7);
}

and see how that works for you now. That should keep everything from sitting on top of each other.

Let me know if I can help,
Bill

[Claire Watson]

Oh thank you so much! Sorry for the late reply, I didn’t get an email notification so failed to check until now if I got a response! 🙂

All good now! Cheers!

[Bill Robbins]

Claire,

So sorry the notification didn’t make its way to you. Glad to hear that did the trick though.

Have a great weekend 🙂

[Author]

Posts