Upload different hero image for mobile only - Venture theme

Store Design
1

I have gone through all the posts about this topic and have not been able to make this work. I am fine with my desktop image but would like my mobile header image to be different as well as longer, about the size of an instagram reel in feed. My current mobile header image is too short. my site is toffeecosmetics.com. This is my first time posting so please let me know what you need from me. Thank you to anyone who helps out!

2

Hi @alash ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
	.site-header .small--one-quarter{
		width: 15% !important;
	}
	.site-header .small--one-half{
		width: 70% !important;
	}
	.site-header__logo img{
		width: 200px !important;
		max-width: 200px !important;
	}
}

Hope it helps!

3

I just tried this and it hasn’t changed anything. I was hoping to get the option to add a different image for mobile so that it is longer.

4

Hi @alash ,

I checked and couldn’t find the code you added. After you add it successfully, everything will show like this:

Screenshot.png
Screenshot.png387×436 122 KB

Hope it helps!