Getting Shopify Image To Fit On Mobile Platform

Store Design
1

Hello, I am currently struggling on getting my shop to look the same on both mobile and desktop. I love the way it looks on desktop, but it seems the images do not quite fit right on mobile and I do not know how to change just one. In particular the image at the very top. Any help would be greatly appreciated. The website is onestopmilitaryshop.com

UPDATE: I am currently using this code at the bottom to get the entire image to show, there is just a ton of empty space that makes the site look a little unprofessional before the holidays.

#shopify-section-hero-1 .hero {background-size: contain;}

2

Hi @OSMS-Brennen ,

I can take a quick look at your code, do you mind sharing your store URL?

Thank you,

Layoutbase - drag & drop page-builder

3

Hey, its onestopmilitaryshop.com thank you!

4

Hi @OSMS-Brennen ,

Please try adding the following:

@media(max-width: 767px){
	.hero-hero-1 .hero__inner {
		padding: 0;
	}
}

Best regards,

Layoutbase - Drag & drop page-builder app

5

Hello @OSMS-Brennen ,

To get this resolved, you have to get your image size adjusted to fit on a mobile screen with the help of a graphic designer. Your current image size is fine for desktop screens not for mobile screens.

Let us know if you need any other help.

All the best,

CedCommerce