Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1073815

    Hello Sirs,

    I use the following snippet to have two culumns on mobile in Shop page/Shop archive:

    @media only screen and (max-width: 480px) {
    main.template-shop.content.av-content-small.units .products .product {
    margin: 0 1% 1% 0 !important;
    width: 49% !important;
    }
    .woocommerce.archive #main ul.products {
    margin-left: -7.5%;
    margin-right: -7.5%;
    }

    I wish to have the same 2 columns on my Homepage (in the Product Slider), in search results and in related products in the product page also.
    In factm I only need the correct class for Homepage, Search results page and related products in product page.
    My site is: https://zoomit.gr/wordpress_2/

    I am looking forward to your precious support!

    Thank You in advance.

    Best regards,
    Nick

    • This topic was modified 5 years, 9 months ago by nickgin.
    #1075165

    Hey nickgin,

    This class:
    main.template-shop

    loads it on the specific page. So if you do repalce this one, things will be that it should work on all the pages :)

    Best regards,
    Basilis

    #1075222

    Hi Basilis,

    Thank you for your quick reply.
    I tried the following code, but it didn’t work.

    @media only screen and (max-width: 480px) {
    main.template-shop .products .product {
    margin: 0 1% 1% 0 !important;
    width: 49% !important;
    }
    main.template-shop #main ul.products {
    margin-left: -7.5%;
    margin-right: -7.5%;
    }

    I am looking forward to your help.

    Best regards,
    Nick

    #1076157

    Hi,

    Remove main.template-shop completely and let us know if it fixes the issue.

    Best regards,
    Basilis

    #1078064

    Hi Basilis,
    Finally, I use the following snippet:

    @media only screen and (max-width: 480px) {
    .products .product {
    margin: 0 1% 1% 0 !important;
    width: 49% !important;
    }
    #main ul.products {
    margin-left: 0%;
    margin-right: 0%;
    }}

    Now, I have 2 columns but i cannot adjust the container to be edge to edge.
    I tried with margin-left and margin-right with no result and so I left it to 0%.
    Could you help me please?
    Look at the screenshot: https://prnt.sc/mx2f4c

    Thank You in advance.

    Best regards,
    Nick

    • This reply was modified 5 years, 9 months ago by nickgin.
    #1079846

    Hi,

    Thanks for the update.

    That is possible, but you have to place the product grid element inside a color section. You can then adjust the width of the color section content. More info in the documentation.

    // https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width

    Best regards,
    Ismael

    #1080343

    Hi Ismael,

    It really worked! You are great!
    Could you help me also with css code to have two columns product listings in full width in Shop archives, related products, search results..etc?

    Thank you in advance,

    Best regards,
    Nick

    #1080616

    Hi Ismael,

    How are you?
    I am trying to figure out on my own, so I succeed to have:
    1) Full width in Product Slider
    2) Full width in Product Listings (Shop archives, related products… etc)
    3) 2 columns on mobile

    BUT my issue is that I cannot have at the same time, margins 0% IN #section-container-width .container #main ul.products (that’s Product Slider)
    AND margins -7.5% IN #main ul.products (that’s the rest Shop archives, related products… etc).

    I am using the following css code:

    /* Snippet code about Product Slider Full Width */
    /* Color section container width */
    @media only screen and (max-width:480px) {
    #section-container-width .container {
    width: 100% !important;
    min-width: 100%;
    padding: 0;
    margin: 0;
    }}

    /* 2 columns on mobile */
    @media only screen and (max-width: 480px) {
    .products .product {
    margin: 0 1% 1% 0 !important;
    width: 49% !important;
    }

    /* Full Width in Product Listings */
    #main ul.products {
    margin-left: -7.5%!important;
    margin-right: -7.5%!important;
    }

    /* Full Width in Product Slider */
    #section-container-width .container #main ul.products {
    margin-left: 0%!important;
    margin-right: 0%!important;
    }}

    I am looking forward to your help.

    Best regards,
    Nick

    #1081249

    Hi,

    Thanks for the update.

    Can you give us a link to the pages with the product slider and listings? Screenshots of expected layout will help as well.

    Best regards,
    Ismael

    #1081441

    Hi Ismael,

    Thank you for your amazing support!!
    I will write one more review for you because you are worth it!!!

    Regarding to the product slider, it works as expected with the following snippet:

    /* Snippet code about Product Slider Full Width */
    /* Color section container width */
    @media only screen and (max-width:480px) {
    #section-container-width .container {
    width: 100% !important;
    min-width: 100%;
    padding: 0;
    margin: 0;
    }}

    /* 2 columns on mobile */
    @media only screen and (max-width: 480px) {
    .products .product {
    margin: 0 1% 1% 0 !important;
    width: 49% !important;
    }

    /* Full Width in Product Slider */
    #section-container-width .container #main ul.products {
    margin-left: 0%!important;
    margin-right: 0%!important;
    }}

    Regarding to the product listings, it works as expected with the following snippet:

    @media only screen and (max-width: 480px) {
    .products .product {
    margin: 0 1% 1% 0 !important;
    width: 49% !important;
    }
    /* Full Width in Product Listings */
    #main ul.products {
    margin-left: -7.5%!important;
    margin-right: -7.5%!important;
    }}

    Product Listings as expected:
    https://prnt.sc/n0yfi4

    Product Slider not as expected:
    https://prnt.sc/n0yfcd

    Product Listings not as expected:
    https://prnt.sc/n0zweo

    Product Slider as expected:
    https://prnt.sc/n0zvwt

    Link to Product Listings
    https://zoomit.gr/wordpress_2/product-category/kalokairina/?product_tag=tsantes-thalassis

    Link to Product Slider in Homepage
    https://zoomit.gr/wordpress_2/

    So, how can we combine both snippets?

    Thank you in advance.

    Best regards,
    Nick

    #1082462

    Hi,

    Thanks for the update.

    You can add this css code inside the css media query.

    .archive .entry-content-wrapper ul.products {
        width: calc(100% + 50px);
        margin-left: -25px;
    }

    Best regards,
    Ismael

    #1082481

    Hi Ismael,

    You did the miracle again!!
    I will write a review at once! I love your team!
    Thank you!!!
    You can close this ticket.

    Best regards,
    Nick

    #1082523

    Hi,

    Great! Thanks for the reviews. We’ll close the thread now.

    Have a nice day.

    Best regards,
    Ismael

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