Responsive homepage not working in mobile

[MartaT]

Hi all!

For some reason, the main content inside my homepage isn't responding to Genesis Framework's (Magazine Pro child theme) responsive attributes for mobile. The sidebar shows up perfectly on mobile, but my content is humongous, as if in full-width mode.

I have used Thrive Architect to build the homepage and have never before encountered this problem.

Thank you so much in advance! All help greatly appreciated 🙂

http://cocinateelmundo.com

[carasmo]

You have the incorrect property width in your max-width: 1180px media query. All width: xxx should be changed to max-width. You also have incorrect property: backgroundcolor, should be background-color. Use a good code editor and you'll see that error.

This fixes the home page un-responsiveness and the horizontal scroll bars.

Replace your @media only screen and (max-width: 1180px) { declaration block to the following:

@media only screen and (max-width: 1180px) {
    .site-inner,
    .wrap {
        max-width: 960px;
    }
    .title-area {
        max-width: 380px;
    }
    .site-header .widget-area {
        max-width: 570px;
    }
    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
        max-width: 780px;
    }
    .home .content {
        max-width: 1140px;
    }
    .content {
        max-width: 630px;
    }
    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content {
        max-width: 450px;
    }
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .home-middle .featured-content .entry,
    .sidebar-primary {
        max-width: 300px;
    }
    .sidebar-secondary {
        max-width: 150px;
    }
}

---

Genesis Theme Customization and Help

[MartaT]

Hi Carasmo,

Thank you for your reply 🙂 I have implemented the changes you have suggested, but the error persists (I have checked through the Chrome inspector and the width it registers is still 1140px.

The only place on CSS that this width is present is under site containers, here:

/* Structure and Layout
---------------------------------------------------------------------------------------------------- */

/* Site Containers
--------------------------------------------- */

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

I don't know if I would be able to insert a mobile media command here? I don't understand why the homepage doesn't register the correct width... the rest of the webpage does so just fine.

Thank you so much again!

[Author]

Posts