Different Image banner for mobile Sense theme

Store Design
1

Hey,

So I am pretty much finished with my store but I would like to have a different image showing on mobile and on desktop layout, as the mobile image does not fit well with the desktop layout, as you can see on my website (https://turnmeninja.myshopify.com/ ) I’m using the sense theme and need the code to change it. I’ve seen multiple solutions to this with older themes but never with the newest sense them. Help would be greatly appreciated!

2

@ErykH - use 2 completely different sections, one for desktop images and one for mobile

add both sections to home page and then using css we can hide one of them as per the view.

3

Alright thanks already! What css would I need to add?

4

@ErykH - have you added both sections? if yes then can you please share the site link? css depends on that

5

Hey yeah i just added both sections. The link is: https://turnmeninja.myshopify.com/

6

@ErykH - please add this css to the very end of your base.css file and check

@media screen and (min-width:750px){
#shopify-section-template--16937413640456__4516fe48-f41b-4959-84d5-3303257084b9{
display: none; visibility: hidden;}
}

@media screen and (max-width:749px){
#shopify-section-template--16937413640456__2dfe69f5-2aa0-4862-87c6-0d9e9f7476bc{
display: none; visibility: hidden;}
}
7

It doesn’t work yet.

8

@ErykH - it is really strange, it looks fine in the code too, can you accept me as a collaborator? I will check it

9

Sure thing, how do I do that?