Hello!
Need some help with custom css. I use ‘STUDIO’ theme.
I have two sepearate images uploaded to my image banner section. The first image is for desktop only. The second image is for mobile only.
I am currently using the following coding (pasted in section-image-banner.css) to ensure that the correct image shows up on the correct screen size.
.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
It works perfectly, and the different photos show up when they are supposed to.
However, the second image is cropped and the height is set to “adapt to first image”.
How can I make it so that BOTH images are set to their full height? (without stretching or cropping - I have made them on adobe illustrator as their correct sizes).
desktop view: photo fits perfect.
This is the mobile site, as you can see it is cropping the longer ‘second image’ to adapt to the ‘first image’.
These are the two different images, uploaded into ‘first image’ for desktop and ‘second image’ for mobile.