Different header for mobile and desktop

Highlighted
Tourist
8 0 2
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");
}

}

1 Like
Highlighted
Tourist
7 1 2

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,

0 Likes
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes