Change Metro Without Breaking Mobile Responsive?

[dd50m]

Hello,

We are using the Metro Pro theme with the "Content, Sidebar" layout.

By default, it is roughly 66% (content width) and 33% (sidebar width), we would like to make it 80% content and 20% sidebar.

How can I achieve the look described above without breaking the Mobile Responsiveness?

I tried the following, which looked fine on desktop displays, but it completely broke the Mobile Responsiveness, resulting in cropping of the full content width slider we had set up, and smaller sliders/images below it were not centered. The sidebar on mobile was also then botched. Here is the CSS I modified.

The main content area width was changed from 700px to 850px:

.content {
width: 850px;
}

The primary sidebar ares was changed from 332px wide to 200px:

.sidebar-primary {
width: 200px;
}

The middle left and middle right areas width were changed from 332px wide to 425px wide:

.home-middle-left,
.home-middle-right {
width: 425px;
}

[Pixel Frau]

Look for the media queries section towards the end of your stylesheet. This is where the content and sidebar widths are specified for mobile devices. You need to adjust those widths as well to keep your new layout responsive.

This is where you'll need to make the changes:

@media only screen and (max-width: 1139px) {

    .footer-widgets,
    .site-container,
    .wrap {
        max-width: 960px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
        width: 688px;
    }

    .content {
        width: 580px;
    }

    .site-header .widget-area {
        width: 544px;
    }

    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content {
        width: 380px;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .home-middle-left,
    .home-middle-right,
    .sidebar-primary,
    .title-area {
        width: 272px;
    }
}

[dd50m]

Okay, we'll give it a go. Thanks, Julia!

[Author]

Posts