Solved

Image with text overlay image resize for mobile

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

Accepted Solution (1)

ZestardTech
Shopify Expert
5393 970 1299

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

View solution in original post

Replies 2 (2)

ZestardTech
Shopify Expert
5393 970 1299

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

oscprofessional
Shopify Partner
15821 2368 3077

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.

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing