I would like to make the photos a tad bigger and a little more white gone on the mobile collection view.
second request, is there anyway to make mobile navigation full screen on mobile when opened
thank you!!
I would like to make the photos a tad bigger and a little more white gone on the mobile collection view.
second request, is there anyway to make mobile navigation full screen on mobile when opened
thank you!!
Hey @Modboutique ,
This is Siva from Review My E-Commerce where we do detailed reviews of Shopify and E-Commerce stores.
Actually, the link you have provided is not working and I think it is down, To help you better we need to see your store.
But I think the size of the image can be changed by doing some changes to the CSS Files of your theme and coming to the navigation bar I think there won’t be many options available for you.
Thank you.
If you have liked the answer please share your feedback here in the below link
Sorry it wasn’t linked correctly!
Hey @Modboutique ,
Are you using any kind of app for the Slider on the homepage or is it from the theme?? Because the CSS for it is in the HTML itself so you need to do some changes in its CSS which are present in the HTML file of the homepage, If you have the option to change the HTML and CSS of your theme you can achieve the desired results by changing the of that
Thank you.
I’m talking about making the photos bigger on the collection pages.
product collections page
not homepage
Hey @Modboutique ,
If you want to display only one image per row you can change the grid-template-columns as grid-template-columns: repeat (1,1fr);
@media screen and (max-width: 740px)
.collection__page-products.product-loop {
grid-template-columns: repeat(2,1fr);
}
For reducing the White Space you need to adjust the grid-column-gap,
grid-row-gap in the below code
@media screen and (max-width: 800px)
.collection__page-products.product-loop {
grid-column-gap: 15px!important;
grid-row-gap: 15px!important;
}
.collection__page-products.product-loop {
margin: 0 auto;
width: 100%;
display: grid;
grid-column-gap: 25px;
grid-row-gap: 40px;
}
Thank you.
If you have liked the answer please share your feedback here in the below link