-
Posts
-
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,
NickHey nickgin,
This class:
main.template-shoploads 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,
BasilisHi 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,
NickHi,
Remove main.template-shop completely and let us know if it fixes the issue.
Best regards,
BasilisHi 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/mx2f4cThank You in advance.
Best regards,
NickHi,
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,
IsmaelHi 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,
NickHi 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 mobileBUT 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,
NickHi,
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,
IsmaelHi 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/n0yfi4Product Slider not as expected:
https://prnt.sc/n0yfcdProduct Listings not as expected:
https://prnt.sc/n0zweoProduct Slider as expected:
https://prnt.sc/n0zvwtLink to Product Listings
https://zoomit.gr/wordpress_2/product-category/kalokairina/?product_tag=tsantes-thalassisLink to Product Slider in Homepage
https://zoomit.gr/wordpress_2/So, how can we combine both snippets?
Thank you in advance.
Best regards,
NickHi,
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,
IsmaelHi 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
- The topic ‘2 columns on mobile’ is closed to new replies.