Layout appears too narrow on mobile

[liquid172]

Hello,

My site uses a standard content-sidebar layout and it looks great on desktop.

But I need some help to make the layout look better on smaller screens.

On mobile the content column width only extends to about 2/3 of the page.
The sidebar, which contains widgets, is below the content as expected. But it is also very narrow, about 1/3. Is there a way to make them both wider to fill up the screen more?

I don’t know if this helps but I currently have the following in my Additional CSS.
—————————–
.site {
max-width: 1100px;
}
.site {
background: #F6F6F6;
}

.site-content {
width: 67.2%;
}
.widget-area {
width: 24.7%;
}
——————————–

Thanks

[Themonic-Support]

Hi,

Please check out updated mobile friendly codes https://themonic.com/customization-guide-for-iconic-one-pro-with-css-codes/

Remove this part from additional CSS:

.site-content {
width: 67.2%;
}
.widget-area {
width: 24.7%;
}

if there are any other layout width elements in additional CSS remove them too.

You have also modified the style.css directly I think, as the following is limiting the width in mobile.

site-content {
    width: 70%;
}

I would suggest to reinstall the theme to get default style.css back and ask here with what you want to do.

Do not modify style.css directly as everything can be done via additional CSS, you can ask here if you face any issues.

[liquid172]

Hi. Thanks for the response.

I have reinstalled the default style.css.
I have removed all text from Additional CSS.

What I want to do is to first make sure I don’t have anything that is still limiting what I can do via additional CSS.

Then I would like to extend the width of my contents and sidebar widgets to cover more screen space on mobile.

[Themonic-Support]

Your site is working now as expected.

Content and sidebar cover full space on mobile by default.

Reload a couple of times on mobile to refresh mobile browser cache or check in mobile private browsing mode.

Now, you can use the codes from CSS guide, remember to burst mobile browser cache each time to see live changes.

[liquid172]

I think I figured it out by using the 9th code in the guide you linked to. Thanks for your help.

[Author]

Posts