Image size unchanghable mobile and desktop - debut theme

Store Design
1

Hi everyone,

I am facing an issue regarding the image I added to my homepage.

I cannot resize it once I move to mobile. So, the image looks cut off

the link is www.nopineappleonpizza.com

Is there anyone who has already faced the same issue?

cheers

2

Hi @gnaro ,

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

Here are the Solutions!

Go to Online Store->Theme->Edit code

Asset->/theme.css ->paste the below code at the bottom of the file.

@media screen and (max-width: 600px) { 
	.hero--large {
	    height: 220px;
	}
}

If you have any concerns feel free to ask me!

Regards,
Ani

3

Hi @gnaro ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
#shopify-section-1634069693b1f72ab0 .hero__inner {
    padding: 56% 0 0;
}
#shopify-section-1634069693b1f72ab0 .hero {
    height: auto;
    background-size: contain;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
4

Hi! I accept it as it works for every device.