Hi,
I am trying to make the image within the ‘image with text’ section on my store smaller. I have used the below code which seems to work on mobile but isnt working properly on desktop.
I am simply trying to make the image size 100px by 100px maximum while keep everything centred and aligned. On desktop the image is aligned to the top for some reason and isn’t vertically centred. Other than that it appears to work fine on mobile.
I have tried pasting this into the ‘custom css’ section in theme editor however it is longer than 500 characters so isn’t saving. I can’t figure out where to paste this into the base.css or the page.json code. I want these changes to apply only to my ‘page.certifications’ page.
Note - this is an unpublished theme as my current store is live so I cannot share the link.
Can someone please help amend the code / show me where to paste this in to the relevant code section?
Thanks in advance
Code:
.image-with-text__media-item.image-with-text__media-item--small.image-with-text__media-item--top.grid__item {
width: 100px;
height: 100px;
}
.image-with-text__media-item.image-with-text__media-item--small.image-with-text__media-item--top.grid__item .image-with-text__media {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image-with-text__media-item.image-with-text__media-item--small.image-with-text__media-item--top.grid__item img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
margin: auto;
}
Before code:
After code:
