hi,
I have a problem with image resizing. I uploaded a new image for the collection under collection list. however, when I go to mobile view, the image isn’t resizing. the size of the image is 1000x500.
Topic summary
A user encountered an issue where a collection list image (1000x500px) wasn’t resizing properly on mobile devices in the Athens theme.
Solution Provided:
- Navigate to the theme’s base.css or theme.css file
- Add custom CSS code at the end of the file targeting mobile screens (max-width: 600px)
- The code adjusts
.collection-6 .card-overlayproperties:- Sets
object-fit: contain - Sets
height: auto - Adds
padding-bottom: 80%
- Sets
Outcome:
The CSS fix successfully resolved the mobile image resizing issue. The user confirmed the solution worked as intended.
1 Like
Hello @Eugene13 .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.
here’s the address https://hazmotorsport.co.uk/
it’s hazmotorsport.co.uk
- Here is the solution for you @Eugene13
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 600px) {
.card-overlay-media {
object-fit: contain !important;
height: auto !important;
}
.collage-6 .card-overlay {
padding-bottom: 80% !important;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
thank you very much. it works!
1 Like
Glad to help you. Have a good day.