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

Viewing 14 replies - 91 through 104 (of 104 total)
  • Good Morning Sam,

    I want to show 2 products per row on mobile, I really appreciate your help, this is my store:

    https://www.urbanvapor.co/

    Thank you!!!

    Sam

    (@soumendra)

    Hello @spotcamilo,

    Currently, I can see two products in a row in mobile device: http://take.ms/ik8TR

    Are you referring to some other page? If so then please share a direct link to the page where exactly you are facing the issue so that I can take a look at it.

    Looking forward to helping you.

    Thank you.

    Hi @soumendra

    Can you also help me with the correct coding to make all product pages show products in 2 columns (in mobile view):
    https://glory2god.faith

    Thanks alot!

    May God bless you.

    • This reply was modified 1 year, 5 months ago by  lullana.
    Sam

    (@soumendra)

    Hello @lullana,

    Hope you are doing well today.

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

    .qodef-pl-outer.qodef-outer-space {
        height: auto !important;
    }
    .qodef-pl-holder.qodef-masonry-layout.qodef-two-columns .qodef-pli {
        width: 50%;
        float: left;
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
    }

    Hope that helps.

    Thank you.

    Hi @soumendra

    Hope you are also doing well today.

    Thank you very much for the code, had 2 questions on it tough:

    When scrolling down, the 2th 3th and 4th photo go down. Do you have a solution for that.

    Also if it’s possible for the individual product pages to view in 2 rows, for example this page https://www.glory2god.faith/sweatshirts-2/

    Thank you!

    Hi @soumendra
    I’ve tried many code you gave
    I didn’t know why my site still 1 column
    Please take a look at this
    http://www.kaukah.com
    And I’ll very thank fully if you help me

    Sam

    (@soumendra)

    Hello @lullana,

    Sorry for the late response.

    When scrolling down, the 2th 3th and 4th photo go down

    That is some sort of feature of the theme. You can check the theme’s options panel to see if there is an option to make that off.

    For the individual product pages, you can try adding this CSS to your Custom CSS/ Additional CSS to see if that helps.

    .woocommerce .products li {
        width: 50% !important;
    }

    Hope that helps.

    Thank you.

    Sam

    (@soumendra)

    Hello @endrokust,

    All the above codes may not work for you because of the different themes which is having different codings.

    You can try adding this CSS to your Custom CSS/ Additional CSS to see if that fixes the issue for you.

    @media screen and (max-width: 767px){
    .products li {
        width: 50% !important;
    }}

    Hope that helps.

    Thank you.

    Hi @soumendra
    Wow amazing, that was work!
    thank you so much
    I’ve spent my whole of day to find out the solution
    and you save my life
    once again, thank you so much

    Hello @endrokust,

    Can you also help me with the correct coding to make the home page and all product pages show products in 2 columns (in mobile view):
    https://flyingwestern.com

    Thanks a lot!

    Sam

    (@soumendra)

    Hello @flyingwestern,

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

    @media screen and (max-width: 479px){
    .woocommerce-page ul.products li.product:nth-child(n) {
        width: 45.25% !important;
        margin: 0 2% 0 !important;
    }}

    Hope that helps.

    Thank you.

    Thanks for your help, you are awesome. Your code resolved my problem, just my product slider not showing properly please help me.

    Thanks a lot…!!!

    Hi @soumendra,

    I tried some settings for the slider on homepage but none of working.
    please help me out.

    Thanks.

    Sam

    (@soumendra)

    Hello @flyingwestern,

    For product slider, you can try adding this CSS to your Custom CSS/Additional CSS:

    .porto-products.wpb_content_element .slider-wrapper {
        max-width: 200px !important;
        margin: auto !important;
    }

    Feel free to ask if you need anything else.

    Thank you.

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