Widget Text Overlapping in Cell Phone View

[trbdesign]

Hi,

I'm using the Genesis theme and I inserted a text widget in the header. When I look at it on my cell phone, the text is wrapped around and on top of the logo on the left side. Does anyone know how I can prevent this from happening? The site is http://sample4.tonibdesign.com/

Thanks in advance.

Toni

 

 

[David Chu]

Toni,

That's an interesting question!  I have run into this a bunch of times.  The way the Genesis background image processing works is that it's treated as the background image.  That means it doesn't really have any weight, so to speak, so the text widget doesn't "see" it, and just gets shuffled over the top of it.

What I often do is to not use the custom background at all, and instead use a hook to place actual HTML with an IMG tag in the header so that if the image is wide, it will reduce at smaller sizes.  It then "has weight".

Here's something a little less drastic you could do if you're handy with CSS.   At small tablet size, you could increase the min-height of the header.  Then you could put a large margin on top of the text widget, which would push it down, then adjust to taste so that it looks good with the logo.

Or something even easier... just vanish the text widget at small tablet level.... you have the address and phone listed below in your map!   🙂

Dave

 

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts