Keep sidebar on mobile

  • Resolved jankoratkovic

    (@jankoratkovic)


    5 years, 7 months ago

    Id like to have same sidebar look on mobile version as on desktop. So, sidebar and, lets say 2 columns. I have already changed css following this and could not find anything about sidebar except changing its position to the top of the page instead of the bottom.
    Any help greatly appreciated.
    Janko

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hi @jankoratkovic – the CSS Jesse gave there says “min-width: 768px”, meaning that the minimum width needs to be 768px. Can you try just making that a smaller number to see if it works on mobile? With the code Jesse gave, it’s meant to work on iPads, but not phones because there’s not enough space for that.

    Thread Starter jankoratkovic

    (@jankoratkovic)

    Thanks for your response.
    It doesnt work with smaller min-width. Now I am using:

    
@media only screen and ( min-width: 320px ) and ( max-width: 767px ) {
    .products {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    ul.products:before,
    ul.products:after {
        width: 0 !important;
    }
    ul.products li.product {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: 34%;
	max-width: 50%;
        padding: 0 2px;
	margin-bottom: 0;
    }

    Client insist on showing sidebar…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Keep sidebar on mobile’ is closed to new replies.