Hello,
The photos for the collections on mobile view are cutting off. On desktop it is fine but mobile it is isn’t. I have tried playing around with the number of columns and I still am having this problem. Any solutions?
1 Like
@shubhampatil - add this css to the very nd of your custom.css file and check,
@media screen and (max-width:749px){
.cardproduct .card .card__inner .card__media {height: 160px !important;}
}
This is Richard from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width:749px){
.grid__item .cardproduct .card .card__inner .card__media {
height: 170px !important;
}
}
Hope that my solution works for you.
Best regards,
Richard | PageFly
Hi,
The problem you are having is that the image has a square proportion and right now the container is taller than it should. So we need to make it square again.
As you see in the image, the container has a height of 230 and a width of 173.
So we will need to make the height of the container smaller.
To do that you can add the following code to the bottom of your custom.css file inside Assets:
@media screen and (max-width:749px){
.cardproduct .card .card__inner .card__media {height: 173px !important;}
}
And now the images should be fully visible like in the screenshot from below:
This works when resizing desktop browser, however, on mobile device I am still experiencing same issue…
Please try with this code:
@media screen and (max-width:749px){
.grid__item .cardproduct .card .card__inner .card__media {
height: 170px !important;
}
}
Still same issue. It works when resizing desktop browser but on mobile devices the photos are still cut off.