Centering of sidebar content for mobile responsive layout shift

[patrickg]

Hello, on a desktop computer my sidebar content looks fine:

Yellowstone 2017 Limited Edition Bourbon Review

But when you view the same page on a mobile device (e.g., iPhone using Chrome) the sidebar content gets put below all the page content to conform to the screen size. I’m fine with that rearrangement but the content gets aligned left to the side of the phone. I would like to know how to modify so when on mobile it appears nicely centered on the screen with white space on both sides.

You can see the current alignment issues in the attached mobile screen captures.

-limited-edition-bourbon-review/#.Wim_JbQ-fUL

Thank you.

[nabeel]

Hi there,

Thanks for writing around! Please add the following code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

@media screen and (max-width: 979px) {
    .x-sidebar.right {
        padding: 20px !important;
    }
    aside.x-sidebar.right * {
        width: 100% !important;
    }
}

I see you’ve iframes in your sidebar, remove the width attribute to make them full width,

Hope this helps!

[patrickg]

I’m not see any iframe content. Which portion are you referring to?

[Joao]

Hi There,

The Iframe is generated by your Adds.

To center your side bar, you can add the following code to Theme Options CSS

.x-sidebar .widget {
    text-align: center;
}

I personally it looks better as it is now due your social icons on the sidebar.

Hope it helps