Sidebar Width on Mobile

  • Resolved Paul33

    (@paul33)


    6 years, 10 months ago

    I have used Custom CSS to make my two column width work okay on my desktop PC but on mobile devices the sidebar is also shrunk to just 30% of the screen width which makes it useless.

    I have no doubt screwed up on the @media screen side of things so can somebody modify this so that the sidebar shows full width under the content on a mobile ?

    Current CSS >>>>>

    .wrap {
    /* margin-left: auto; */
    /* margin-right: auto; */
    max-width: 100%;
    /* padding-left: 2em; */
    /* padding-right: 2em; */
    }

    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 100%;
    /* padding-left: 3em; */
    /* padding-right: 3em; */
    }
    }

    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    max-width: 100%;
    }

    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap
    {
    max-width: 100%;
    }
    }

    .has-sidebar #secondary {
    width: 30% !important;
    }

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

  • try wrapping the @media query around all styles you want to apply:

    @media screen and (min-width: 30em) {
  .page-one-column .panel-content .wrap
  {
    max-width: 100%;
  }

  .has-sidebar #secondary {
    width: 30% !important;
  }
}
    Thread Starter Paul33

    (@paul33)

    Sorry ….. can you clarify what you mean by that ?

    Do you mean replace my Custom CSS with the above or incorporate my CSS within the above ?

    I’m pretty green with Custom CSS I’m afraid !!!

    replace this section in your CSS, 

    @media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap
{
max-width: 100%;
}
}

.has-sidebar #secondary {
width: 30% !important;
}

    which obviously does not work, with the CSS suggested in my reply.

    read up on @media queries; https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Thread Starter Paul33

    (@paul33)

    Thanks for your help Michael ….. worked perfectly !

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sidebar Width on Mobile’ is closed to new replies.