Kathryyyyyyn Posted March 3, 2020 Share Posted March 3, 2020 Site URL: http://www.laytonsvillevet.com Hello! I'm using the Harris template, and have a very wide full bleed banner (500px height) on my desktop site. For mobile, I'm searching for something that looks a little better. I'm wondering if it's possible to override the page.banner.wrapper image for screens under 400px to a different banner URL image that is square, rather than elongated. Here's what I was working with -- I could see the new background come through momentarily, but then as the template background fades in quickly overtop of it, so it is replaced with the elongated image I would like only visible on desktop. If all else fails, I'll just do some media screen CSS to change the height, but I just think this would look nicer. Any help is much appreciated! <style> .page-banner-wrapper { height: 500px !important; } @media screen and (max-width: 400px) { .page-banner-wrapper { background-image: url("https://i.imgur.com/6XIwav6.png") !important; } } </style> Here is the image I'd like override the desktop banner background on the mobile site: https://i.imgur.com/6XIwav6.png Link to comment
tuanphan Posted March 17, 2020 Share Posted March 17, 2020 <style> @media screen and (max-width:640px) { .page-banner-wrapper { background-image: url(https://i.imgur.com/6XIwav6.png); background-size: cover; background-repeat: no-repeat; background-position: 30% 70%; height: 50vh !important; } .page-banner-image-container img { visibility: hidden; } } </style> or <style> @media screen and (max-width:640px) { .page-banner-wrapper { background-image: url(https://i.imgur.com/6XIwav6.png); background-size: cover; background-repeat: no-repeat; background-position: 30% 70%; height: 50vh !important; } .page-banner-image-container img { visibility: hidden; } } </style> Page Settings > Advanced > Header Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.