Can anyone tell me how to reduce the size of these 4 images and the width of the text so that it doesn’t stretch so much in larger resolutions?
Topic summary
A user seeks help reducing the size of 4 grid images and limiting text width to prevent excessive stretching on larger screen resolutions.
Solution Provided:
- Custom CSS code was shared to be added to the
base.cssfile - The code sets image width to 300px, adjusts grid column proportions, and removes content gaps
- Initial results showed the desired layout improvement on larger screens
Ongoing Issue:
- The CSS solution causes layout problems on medium-sized screens (1600px to 999px)
- Images and text appear misaligned or improperly sized at these breakpoints
- The discussion remains open with the responsive design issue unresolved
Hi @pimpaoclothing ,
Could you please share your Store URL and password (if applicable) so that I can review it and provide you with the appropriate solution code?
Looking forward to your response.
Thanks!
1 Like
Hey, sure here it is, and thanks in advance
You are most welcome.
In order to make the 4 grid image small and the width of the text then follow these steps.
Go to Shopify Admin > Online Store > Edit Code > base.css
Go to end of base.css file and paste the following code.
#shopify-section-template--24835640394052__image_text_grid_N4TnFL .grid-image img {
width: 300px !important;
max-width: 100% !important;
}
.image-grid{
grid-template-columns: 0.7fr 1fr !important;
}
.grid-content{
gap: 0px !important;
}
Results:
1 Like
