Hi,
I am using the Gecko theme and need help with CSS code to make the main product page image full width and also the collection page full width both in mobile view.
Any help will be greatly appreciated!
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
Hi,
The store address is www.pictureperfectinteriors.co.uk.
I checked it in my device it is fit to width
it is proper output no need to change it.
Thank you.
Hi,
Why are there white margins to the left and right if it is fullwidth?
Hi @LeanneJ12 ,
Go to Assets > pre_theme.min.css and paste this at the bottom of the file:
@media (max-width: 767px) {
.template-product #nt_content .container.container_cat.cat_wide {
padding-left: 0 !important;
padding-right: 0 !important;
}
.template-product .product-images .col_nav.nav_large,
.template-product .product-infors {
padding-right: 22.5px !important;
padding-left: 22.5px !important;
}
}
it will display like this:
Hope it helps!
Hi @LitCommerce
That’s perfect, works a treat!
Do you have a code solution at all for the collection page query I had?
Hi @LeanneJ12 ,
Please add code:
@media (max-width: 767px) {
.template-collection .container.container_cat {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Hi @LitCommerce ,
That’s brilliant, thank you so much for your help!
1 Like
Hi @LitCommerce ,
Following on from your previous help with the collection page product images, are you able to provide code that will reduce the spacing a little between those products, again in mobile view?
Hi @LeanneJ12 ,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.