Why isn't my mobile image resizing properly on my Sense theme site?

Store Design
,
1

site: https://shmilyaesthetics.myshopify.com/

theme: Sense

I am trying to get the image that shows on desktop to display properly (fit to the screen) on mobile. I looked and saw that the solution was to add code to the end of a assets/theme.css file but I don’t have that.

shmilyac_0-1675186028297.png
shmilyac_0-1675186028297.png1992×1117 319 KB

shmilyac_1-1675186064739.png
shmilyac_1-1675186064739.png376×920 233 KB

2

Hi @shmilyac ,

Please provide password too.

So that we can help you.

3

Hi @shmilyac

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.img-button-text-main{
  background-size: cover !important
}

Hope my answer will help you

4

Unfortunately this did not work. When I preview the mobile version on my desktop it looks okay, but when I actually use a mobile device to look at it the issue persists.

5

Hi @shmilyac

Can you kindly let us know your store password? We will check and suggest you something if possible.

6

Hi @shmilyac

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

You can retry with this css code :

@media only screen and (max-width: 767px) {
.img-button-text-main{
  max-width: 100%;
  height: auto;
  background-size: cover !important
}
}