Website not mobile responsive

[meltdown]

Theme: Magazine Pro

When viewed on a mobile device I see that my site is not mobile responsive (users must scroll left & right to view full page content).

I don't believe that was the case before so I must have messed something up. Might one of you be able to help me resolve this? Thanks so much!

https://glasshausitaly.com

[Gary Jones]

The styling of the <div class="home-middle widget-area"> and the section / articles inside of it is off - widths + margins being more than 100% etc.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[meltdown]

Hi Gary - Thanks for your response. I see what was the culprit. I want to increase the width of my content area and decrease the width of my sidebar. To do so, I added the following to my Additional CSS Customizer:

.site-inner,
.wrap {
	margin: 0 auto;
	max-width: 1200px;
}

.content {
	float: right;
	width: 900px;
}

.sidebar-primary {
	float: right;
	width: 260px;
}

This did the trick but obviously threw the mobile responsiveness out the window. Can you tell me how I might achieve the desired results without doing so?

Thanks!

[Gary Jones]

You'll need to add in responsive styles -

/* Your styles go here for all sizes UPTO XXXpx */

@media only screen and (min-width: XXXpx) {
 /* Your styles go here for all sizes AT OR ABOVE XXXpx */
}

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Sridhar Katakam]

You might also want to look at media queries and adjust the width values.

An alternative approach is to replace the floats with Flexbox. Here's fully modified Magazine Pro's style.css with the same widths for content and sidebar as the stock Magazine Pro, but with floats replaced by Flexbox. It should be easy to change the % width values for .content and .sidebar to your liking.

https://pastebin.com/raw/ABgdgSHN

Note: Modified for and tested only in content-sidebar layout.

---

Genesis Tutorials | Follow me on Twitter

[meltdown]

Thank you both for your responses. Sridhar, your idea intrigues me but I'm afraid I'm out of my league. If you have time, would you be so kind as to tell me how to implement it for each screen size?

As for adjusting the width values; how does one know what the next set of numbers should be? For example, for @media only screen and (max-width: 840px), how do I determine the correct .content and .sidebar values?

[Author]

Posts