Custom layout width for widget on mobile

  • Resolved atesz03

    (@atesz03)


    2 years, 10 months ago

    Hello,

    I set my main layout on mobile device to 95% with the following this code:

    @media only screen and (max-width: 959px){
#main #content-wrap.container{
    width: 95% !important;
    max-width: 95% !important;
}
}

    It works nice but the only problem is that my primary sidebar widget remains 100% on mobile. So I tried this code but unfortunately no success:

    @media only screen and (max-width: 959px){
#widget-area.sidebar-primary #content-wrap .container{
    float: none !important;
    width: 95% !important;
    padding: 0 !important;
    border: 0;
}
}

    Can you please have a look at my second code and help me to correct it? Thank you in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Shahin

    (@skalanter)

    2 years, 10 months ago

    Hello @atesz03,

    The simple way to achieve that is using the theme options; you can set the size of the content box and sidebar column.
    Please navigate to Customizer > General Options > General Settings: https://postimg.cc/kBw8jdmp and use the responsive option to set them on mobile. The settings in this tab will affect the entire website. Or use the following CSS:

    /* Only for 959px and smaller devices */
@media only screen and (max-width: 959px){
    /* Primary Container */
    #main #content-wrap.container{
        width: 95% !important;
        max-width: 95% !important;
        /* put it in center */
        margin: 0 auto;
    }

    /* Primary Sidebar */
    #wrap .widget-area.sidebar-primary,
    #wrap .widget-area.sidebar-secondary,
    #wrap .content-left-sidebar .widget-area {
        float: none !important;
        width: 95% !important;
        padding: 0 !important;
        border: 0;
        /* put it in center */
        margin: 0 auto;
    }
}

    Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

    I hope that helps.
    Best Regards

    Thread Starter atesz03

    (@atesz03)

    2 years, 10 months ago

    It worked perfect! Thank you very much!

    • This reply was modified 2 years, 10 months ago by atesz03.
    Shahin

    (@skalanter)

    2 years, 10 months ago

    You’re most welcome, and I’m glad we could help.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Custom layout width for widget on mobile’ is closed to new replies.