Different header for mobile and desktop

[PetervdHoeven]

Hello community,

I currently use the Debutify theme for my store https://www.bigbuffalo.nl/

I want to be able to create separate home page banners for mobile and for desktop. The banners that work well for desktop do not automatically resize on mobile and they end up being cut off.

Please advise if anyone has been able to figure this out!

Peter

Example: 

/* Desktop */

@media only screen and (min-width: 768px) {
??? {
background-image: url("URL HERE");
}
}

/* Mobile */

@media only screen and (max-width: 767px) {
??? {
background-image: url("URL HERE");
}

}

[PetervdHoeven]

I currently use the Debutify theme for my store https://www.bigbuffalo.nl/

I want to be able to create separate home page banners for mobile and for desktop. The banners that work well for desktop do not automatically resize on mobile and they end up being cut off.

Please advise if anyone has been able to figure this out!

Peter

Example: 

/* Desktop */

@media only screen and (min-width: 768px) {
??? {
background-image: url("URL HERE");
}
}

/* Mobile */

@media only screen and (max-width: 767px) {
??? {
background-image: url("URL HERE");
}

}

[boompah]

Hi Peter,

I just helped a client with this, how familiar are you with CSS? There's kind of a few ways you can tackle this depending on the image/content, it's a bit more of advanced customization that the admin CMS can't really accommodate.

I could definitely take a look if you invite me to your store or, we can have quick Skype/Hangouts call.

Best,

[CrystalWicca]

Did you solve this? I am having the same issue.

[NySMyPlayground]

I'm having the same issue. How do we edit the mobile header to center our logo? Can you post the code here? Thanks!