Support » Theme: Storefront » 2 products per row on mobile !!

Viewing 15 replies - 46 through 60 (of 104 total)
  • Sam

    (@soumendra)

    Hello @headwaters,

    You can replace the above code with this for a better result:

    @media screen and (max-width: 546px){
    .entry-content .woocommerce .row .product:not(.col-xs-12) {
        flex: none;
        width: 50%;
    }}

    Hope that helps.

    Thank you.

    Wow, @soumendra

    It worked.
    A big thank you
    You are a blessing to many of us on this thread.

    Sam

    (@soumendra)

    Hello,

    It’s my pleasure helping you all.

    Please let me know if you need anything else.

    Thank you. 🙂

    Hi @soumendra

    Thanks for the other day, i really appreciate.

    In response to your question that If I need anything else, i should let you know.

    I have an issue with Notification Bar covering up/blocking Menu when site is viewed on mobile. Whereas, it’s not so on Desktop.

    Visit the site both on desktop and mobile, you will see that the FREE SHIPPING notification bar covers the menu and other elements of the header

    You can also see the difference in the screenshots https://ibb.co/fsF56S and https://ibb.co/cJKRD7

    So i want to to help me with CSS rule or anything to make the menu and other parts of the header to be visible and unblocked.

    Thank you very much

    Sam

    (@soumendra)

    Hello @headwaters,

    Sorry for the late response.

    I cannot access your site: https://prnt.sc/ii5m3h

    Please fix that and let me know so that we can check the issue for you.

    Thank you.

    Hi @soumendra

    Sorry about that, i had issue with the Hosting provider at that time, The site is back active now. Please check thedemosite.online

    Sam

    (@soumendra)

    Hello @headwaters,

    You can try adding this CSS to your Custom CSS for adjusting that:

    #page {
        padding-top: 25px;
    }
    @media screen and (max-width: 786px){
    .site-header {
        margin: 0px;
    }
    .jet-mobile-menu-toggle-button {
        margin-top: 51px;
    }
    .mobile-panel {
        height: 54px;
    }}
    @media screen and (max-width: 397px){
    #page {
        padding-top: 48px;
    }
    .jet-mobile-menu-toggle-button {
        margin-top: 73px;
    }}

    Hope that helps.

    Thank you.

    Hi @soumendra

    Below is the your rule i modified to get the perfect view i wanted. Thanks a lot because it’s your rule i built on

    Now works. Thanks. I appreciate.

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

    #page {
    padding-top: 0px;
    }
    .site-header {
    margin: 45px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    .jet-mobile-menu-toggle-button {
    margin-top: 50px;
    }
    .mobile-panel {
    height: 65px;
    bottom: 264px;
    padding-bottom: 0px;
    top: 45px;

    }}
    @media screen and (max-width: 397px){
    .site-header {
    margin: 52px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    #page {
    padding-top: 0px;
    }
    .jet-mobile-menu-toggle-button {
    margin-top: 52px;
    }
    .mobile-panel {
    height: 65px;
    bottom: 264px;
    padding-bottom: 0px;
    top: 45px;

    }}

    Sam

    (@soumendra)

    Hello @headwaters,

    Yes, it’s always suggested that you can adjust the code as per your requirement.

    I am glad you find my help useful.

    Thank you.

    Hi @soumendra Sam (@soumendra)
    I know you have been busy but would really appreciate if you can solve mine as well.
    Website – oopanda.com
    Tried all the codes before asking you for help. Mine seems to be different than others.

    Thnaks!

    Sam

    (@soumendra)

    Hello @shubh16489,

    You can add this CSS to your Custom CSS/ Additional CSS for adjusting that:

    @media screen and (max-width: 464px){
    .col-xs-6.product {
        width: 50%;
    }}
    @media screen and (max-width: 657px){
    .box-title .price {
        clear: left;
        width: 100%;
        float: left;
        position: relative !important;
        text-align: center !important;
    }
    .stats-container .title-product {
        width: 100%;
        text-align: center;
    }}

    Hope that helps.

    Thank you.

    Wow @soumendra !
    Worked like a charm.
    Thanks a lot!

    Sam

    (@soumendra)

    Hello @shubh16489,

    It’s a pleasure helping you.

    Feel free to ask if you need anything else.

    Thank you. 🙂

    Hi Sam, Looks like you’ve been super helpful with this. I went through the entire thread and tried all the codes previously listed and they did not work for my site.

    The following code pushes all of the images to the left in 1 column half the page, but it doesn’t display a 2nd column on the right:

    @media screen and (max-width: 770px){
    .woocommerce .products .product {
    width: 50% !important;
    }}
    @media screen and (max-width: 661px) and (min-width: 340px){
    .woocommerce .products .product {
    min-height: 390px;
    }}

    My page is: http://redeadstock.com/beta/

    TY in advance!

    Sam

    (@soumendra)

    Hello @dondada79,

    Hope you are doing well today.

    As I explained above, the other codes may not work for you because all the sites are having different codes in them.

    However, you need to add this CSS to your Custom CSS/ Additional CSS for adjusting that:

    @media screen and (max-width: 770px){
    .woocommerce .products .product {
        width: 100% !important;
    }}
    @media screen and (max-width: 482px){
    .woocommerce .products .tcol-ss-12.kad_product {
        width: 50%;
        float: left;
        position: relative !important;
        top: 0 !important;
    }}

    Hope that helps.

    Thank you.

Viewing 15 replies - 46 through 60 (of 104 total)
  • The topic ‘2 products per row on mobile !!’ is closed to new replies.