Different picture size for desktop and mobile page (DEBUT theme)

Store Design
1

Greetings

I have an image with text overlay that looks perfect on desktop version, but is too big on mobile one.

How do I edit that?

2

Hello ,
Please share your site url.
So that i can check and let you know the exact solution here.

1 Like
3

Hey. Thank you for taking time to help out. I have sent you a pm.

4

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px){
.shopify-section .hero--medium {
    height: 169px;
}
}

If your css file is having this media then add only css .

hope this will work for you !

1 Like
5

@oscprofessional Hi, how do I move my text overlay is from the bottom of my hero image on my mobile version to in front of the hero image and increase the image height on mobile ?

this is my current theme (debut)
this is my current theme (debut)750Γ—1326 121 KB

and I want the mobile to look like this. How do I that just the homepage is my problem
and I want the mobile to look like this. How do I that just the homepage is my problem750Γ—1332 137 KB

my URL: www.everythingcutesy.myshopify.com

password: ETC10

6

THIS WORKS PERFECTY. THANK YOU SO MUCH !

7

Hello, I am having the same problem. Please could you help me? I want my homepage image to be fully seen without being cut off when viewing on the mobile.

My website url is https://aurouss.co.uk/

Thanks in advance,

Shannon

8

@oscprofessional

Hello, please help me too!

For the desktop everything looks perfect, but for the mobile version, the picture is very large and therefore does not completely fit the screen

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2021-06-09 Π² 14.00.57.png
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2021-06-09 Π² 14.00.57.png2880Γ—1800 572 KB

2021-06-09 14.50.20.jpg
2021-06-09 14.50.20.jpg720Γ—1280 77.5 KB

I will be very grateful to you!

9

Hi! Ive just tried to do this but i cant seem to find theme.scss.liquid?
My only options are theme.css or theme.liquid.

Any help would be appreciated, thank you!

10

I am struggling to get my homepage image to fit with the moble version of my site. it gets cut off but looks fine in desktop. Is anyone able to help with this?

Kind regards

Sarah

11

Hi

I have the opposite issue on this site: https://www.myqalm.fr/

On the home page, I have two slideshows. The size of picture is perfect on mobile but on desktop it is way too big

how can I reduce the size of the picture on the desktop without impacting the mobile rendering. Also on desktop version there is text overlayer that needs to remain in place

thanks in advance

1 Like