Image with text overlay image resize for mobile

Solved
dhutchin
Tourist
8 0 4

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

on desktopon desktopon mobileon mobile

0 Likes
Pallavi
Shopify Expert
2382 397 515

This is an accepted solution.

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

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.

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes