[dowlass]

I’ve got a header image (1180 x 120px), and a custom logo (270 x 89px). Viewed on a mobile the effect isn’t good, the header image scrunches up beneath the logo and makes the logo very indistinct. i.e. it’s a mess!

Below a breakpoint of, say, 600px window width, I’d like not to display the header image and just have a black background colour, against which my logo will display well.

Can I do this in Tempera? If I have to throw some custom CSS at it, what would this be? (I’m not a css guru!)

Thanks.

[Zed]

You can do that with CSS:

@media (max-width: 640px) {
   #branding #bg_image {
       opacity: 0; 
   }
}

This will make the header image fully transparent (so it maintains its height and place in the header), leaving the header background color visible.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Author]

Posts