Layout appears too narrow on mobile

Home Forums Iconic One Pro Support Layout appears too narrow on mobile

This topic contains 4 replies, has 2 voices, and was last updated by  liquid172 2 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #6429

    liquid172
    Participant

    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

    #6430

    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.

    #6431

    liquid172
    Participant

    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.

    #6432

    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.

    #6433

    liquid172
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.