So i am just playing around, feeling out a concept right now but i am having issues with a hero banner and i was hoping to learn how to solve this issue both here specifically and going forward.
The site is in demo at
https://sh0imp8de8cy6chu-56984404121.shopifypreview.com
password: conno
The hero banner at top is just a generic graphic i pulled from the web so that i can learn to display different sized images on mobile vs desktop.
Currently it displays fine on desktop but in mobile display it shows only the solid red centre section (it crops out the two models). I would like to show a smaller version of the image if possible on mobile so that the whole image can be displayed. Alternatly, i would like that when a mobile display is detected it shows a different image altogether (that way i can use an appropriate manually resized image).
Any help would be appreciated
screen shots below
Hello @dhutchin
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 749px){
div#shopify-section-hero-1 div#Hero-hero-1 {
height: 23vh !important;
background-position: center !important;
}
div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner {
padding: 15px 0 21px;
}
div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner h2.h1.mega-title {
font-size: 18px;
}
div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner .rte-setting.mega-subtitle {
margin-bottom: 0;
}
div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner .rte-setting.mega-subtitle p {
margin-bottom: 5px;
}
div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner a.btn.hero__btn {
margin-top: 2px;
}
}
Hi,
Your store looks nice.
I have gone through your mobile version site. Background image you are using is too big. It will cut one model or it will not fit with text,
one thing you can do use other image for mobile, or show text and image differently upper text or image.
