Blog not Resizing on Mobile

[ranchhouse]

Our blog posts and side bar do not seem to be resizing properly on mobile. The images and text are being cut off.

This is the website: https://mlcbigshow.com/

What can we do to adjust? Thanks so much.

[prakash_s]

Hello @ranchhouse,

Thanks for writing to us.

I checked your site it seems that you have customized the sidebar styling through the custom CSS code, please have a look at the given screenshot below.

I would suggest you need set the width:100%; in place of width:auto! important;. Please have a look at your code given below.

@media(max-width:978.98px){
.x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
    float: none;
    display: block;
    width: auto !important;
}
}

Or you can use this code at the bottom of the Theme Options —>CSS.

@media(max-width:978.98px){
.x-sidebar.left {
width: 100%!important;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[ranchhouse]

That helped, thank you!

[prakash_s]

Hello @ranchhouse,

Glad that we were able to help you.

Thanks

[ranchhouse]

So that helped with the sidebar, but the blog posts are still going off the screen on mobile. I’m not sure what selector to use for that. Can you please help? I tried the following, but it doesn’t seem to work:

@media(max-width:978.98px){
.entry-wrap {
width: 100%!important;
}
}

[prakash_s]

Hello @ranchhouse,

Your CSS selector is not correct, I would suggest you add this custom CSS code under the Theme option—>CSS

@media(max-width:978.98px){
.x-main.right {
   width: 100%!important;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks