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

Viewing 15 replies - 61 through 75 (of 104 total)
  • Thanks Sam. The products page still does not appear as it should. it’s created 3 columns instead of 2. Please visit this site on your mobile: http://redeadstock.com/beta/?post_type=product

    Sam

    (@soumendra)

    Hello @dondada79,

    You can replace this code:

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

    with this doe a better result:

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

    Hope that helps.

    Thank you.

    That looks fantastic! Thank you so much.

    Sam

    (@soumendra)

    Hello @dondada79,

    It’s a pleasure helping you.

    Feel free to ask if you need anything else.

    Thank you.

    Hello, please Sam help me out, I have tried all the codes you have posted still does not work for me,i really need to have a two column view on this website https://funkiestores.com

    Sam

    (@soumendra)

    Hello @kachyemmanuel,

    You need to add this CSS to your Custom CSS/ Additional CSS (Appearance > Customize > Additional CSS) for adjusting that:

    @media screen and (max-width: 480px){
    ul.products li.product {
        width: 50% !important;
    }
    .dfd-shop-archive.dfd-shop-columns-4 .products > li.product {
        clear: none;
        float: left;
    }}

    Hope that helps.

    Thank you.

    Wow, thank you so much, This is so great from you, saving people of a lot of stress for free, your a great man, thanks so so much

    Sam

    (@soumendra)

    Hello,

    It’s a pleasure helping you all here.

    Feel free to ask if you need anything else.

    Thank you.

    Heloo sam , I am very grateful for your help the last time, please i understand it is posible that my wordpress website http://www.globalworldelivery.com can be viewed on mobile just as it is viewed on desktop, i do not want it to change from the main desktop view when accessed via mobile phone, please i would be glad if you help me with the right CSS to do that.

    Sam

    (@soumendra)

    Hello @kachyemmanuel,

    Thank you for sharing the issue here.

    Unfortunately, there are no such Theme Options available in the theme to make it unresponsive or a few lines of CSS to cover your requirement.

    It requires a lot of codes to be edited/deleted in your core files to make your site unresponsive.

    However, you can contact the Theme author(s) or any Designer/Developer personally so that they can help you for achieving that.

    Hope that helps.

    Thank you.

    Hey Sam (@soumendra)
    I hope your still around and able to help me out. I must’ve tried 10 of your codes. Huge relief that 1 worked –

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

    BUT – Every other row is missing that 2nd product. =\ Every website needs a different code you said, I hope this can be fixed :3 Much appreciated it would be such a HUGE relief. Also is there a trick you use where you find out what code someone needs easily? I’d like to know how I can be a code master too 🙂

    my website is Iepicshop.com
    oceanwp theme
    https://ibb.co/h5zKZ7 Pic

    Sam

    (@soumendra)

    Hello @endgame421,

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

    @media screen and (max-width: 750px){
    .woocommerce .products .product {
        max-width: 50% !important;
        clear: none;
    }
    .woocommerce ul.products li.product .title {
        min-height: 60px;
    }
    .woocommerce ul.products li.product .inner {
        min-height: 40px;
    }
    .woocommerce ul.products li.product .btn-wrap {
        min-height: 55px;
    }}

    Hope that helps.

    Thank you.

    It worked 🙂 ahhh the relief Sam (@soumendra) I’d love to send you a gift I appreciate you. Funny I could have stressed less these past 2 days my email never notified me of reply.

    Hey Sam (@soumendra)
    I noticed i have this gap in my cataog of categories of iepicshop.com using the code i posted below from you is that fixable? and do you accept donations?

    @media screen and (max-width: 750px){
    .woocommerce .products .product {
    max-width: 50% !important;
    clear: none;
    }
    .woocommerce ul.products li.product .title {
    min-height: 60px;
    }
    .woocommerce ul.products li.product .inner {
    min-height: 40px;
    }
    .woocommerce ul.products li.product .btn-wrap {
    min-height: 55px;
    }}

    Sam

    (@soumendra)

    Hello @endgame421,

    The issue is due to different title length. You can use this CSS to overcome the issue:

    .product-category .woo-entry-inner.clr {
        min-height: 60px;
    }

    Hope that helps.

    Thank you.

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