Move side bar Widget Storefront theme only for mobile

  • Resolved mickael0

    (@mickael0)


    3 years, 10 months ago

    Hi Everyone,

    I have got an issue with moving my woocommerce sidebar widget.
    On desktop it appears on the right side, but on mobile at the bottom.

    I have got that code which does the job on mobile, but also move my desktop side bar on top and breaks all the desktop layout.
    Here is the code that I found. Please help, what I am missing.

    `.col-full {
    position: relative;
    }

    div#primary {
    float: left;
    width: 100%;
    margin-top: 100%;
    }

    div#secondary {
    float: left;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    }`

    I have seen many articles and codes to add such as:

    @media only screen and (max-width: 767px) {

.container > .row {

display: flex;

flex-direction: column-reverse;

}

}

    …but I don’t know how to insert the code above with the correct query.

    Many Thanks for your input.

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

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

  • Are you saying that you’re unsure how to apply these CSS styles for mobile only? If so you can wrap them in a media query like this:

    
@media screen and (max-width: 767px) {

.col-full {
position: relative;
}

div#primary {
float: left;
width: 100%;
margin-top: 100%;
}

div#secondary {
float: left;
width: 100%;
position: absolute;
left: 0;
right: 0;
}	

}

    To be clear, I haven’t tested these styles out for actually positioning things. However, that snippet will only apply these styles to browser windows that are 767 pixels wide or narrower.

    Let us know if you have any questions.

    Thread Starter mickael0

    (@mickael0)

    Thanks for your input. I found the issue that I was facing.

    For some reasons, I had to paste the css code at first on my “Add CSS” section.

    It wasn’t working, none of the css code I got on the web were working when, for some reasons I decided to twist the problem trying to put the code first on the Css code list, and… it worked.

    Weird but it worked.

    If it can help anyone else…

    Many thanks for your input “3 Sons Development”. Really appreciate sharing your knowledge and experience.

    • This reply was modified 3 years, 10 months ago by mickael0.

    Hi @mickael0,

    Thanks for the update and for sharing what you did to help anyone else having a similar problem! Glad to hear you got the CSS working.

    I’ll go ahead and mark this post as resolved. If you have any further questions or need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Move side bar Widget Storefront theme only for mobile’ is closed to new replies.