Solved

How to fix mobile banner image aspect ratio issues?

MrInappropriate
Excursionist
14 1 0

Hello lovely people,

 

I have added both desktop and mobile banner images to the same banner block, and added this CSS to the block, which kind of works:

 

.banner__media-half:nth-child(1) {
left: 0;
right: auto;
width: 100%;
}
@media (min-width: 750px) {
.banner__media-half:nth-child(2) {
display: none;
}
}
@media (max-width: 749px) {
.banner__media-half:nth-child(1) {
display: none;
}
}

 

The problem is that when I squash the browser to mobile view, the banner image sticks at the same aspect ratio as the desktop image, cropping off the top and the bottom.  The mobile image is of course taller than the desktop one.

 

I read in another post that adding this to theme.liquid (but with my section id) fixes it, but it doesn't seem to work for me:

 

<style>
@media screen and (max-width: 749px){
#shopify-section-template--22152022491417__image_banner_nq7af3 .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 69rem;
}
}

</style>

 

This is the website I'm working on: https://mrinappropriate.co.uk/

 

Thank you so much for your help!

Cheers,

Dan

 

Accepted Solution (1)
MrInappropriate
Excursionist
14 1 0

This is an accepted solution.

Thank you so much for helping me out with this, but I semi-accidentally got it working using this CSS attached to the desktop banner block:

@media screen and (max-width: 967px) {
{
display: none;
}
}

 

And this one attached to the mobile banner block:

@media screen and (min-width: 968px) {
{
display: none;
}
}

 

Thank you so much for your help though, greatly appreciated!!

Cheers,

Dan

View solution in original post

Replies 2 (2)
MrInappropriate
Excursionist
14 1 0

Thank you so much, I'm not very good with code, can you please tell me how I could do this?  Thank  you!

MrInappropriate
Excursionist
14 1 0

This is an accepted solution.

Thank you so much for helping me out with this, but I semi-accidentally got it working using this CSS attached to the desktop banner block:

@media screen and (max-width: 967px) {
{
display: none;
}
}

 

And this one attached to the mobile banner block:

@media screen and (min-width: 968px) {
{
display: none;
}
}

 

Thank you so much for your help though, greatly appreciated!!

Cheers,

Dan