Hi! How can I reduce the maximum width that the images on my product pages are (only desktop)? I would like them to be smaller and align with the text so that the image and text together look centered, but don’t take up the entire page on desktop.
I’m using the horizon theme aespa Dirty Work - Dirty Worker – mostbiased
I also like how it looks on mobile currently, so if there’s a way to make nothing change for the mobile version that would be great. Thank you!
Hey @mostbiased
Follow these Steps:
<style>
@media screen and (min-width: 768px) {
.product-information__media {
padding-top: 3% !important;
display: flex !important;
justify-content: center !important;
}
media-gallery.spacing-style.sticky-content.media-gallery--one-column.media-gallery--grid {
width: 65% !important;
}
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
That worked great at changing the image size but now the text is kinda floating on the side, how could i move the image and text closer together, or just the text closer to the middle? Thank you!
@mostbiased it can look like this, is it ok?
Replace the previous code by the following.
The previous post didnt provide an elegant way to solve your problem
this one will make the image close to the text as you wanted
Feel free to let me know if you have any more questions
<style>
@media screen and (min-width: 768px) {
.product-information__grid:not(.product-information__grid--half,.product-information--media-none).product-information--media-left {
grid-template-columns: minmax(420px, 520px) minmax(360px, 460px) !important;
column-gap: 1px;
justify-content: center;
}
}
</style>
