Heading and Text Overlap iPad Landscape Mode

Beaver Builder
1

My homepage main banner has two headings and a text area over a background image. The second heading is overlapping the first on iPad in landscape mode. Here is link to page: https://click-reach.com

I couldn’t find anything specific to this in the knowledge base or forum. Please let me know if you need WP admin or FTP access.

Thanks,
Dave

2

Hey Dave,

Thanks for getting in touch and welcome to the BB forums! That would be caused by the custom CSS added to first headings. Check the screenshot below. Removing the height property on both should fix you right up!
http://imgur.com/uzmq2Gj

Hope this helps!

Ben

3

Hi Ben,

Thanks for your response. I had used CSSHero to create some spacing for the headings and text in that area. I’ve now set those heights to “0”, and added padding/margins in the BB row, heading and text modules to get the spacing right. I then cleared the iPad browser cache and checked again. However, the headings are still overlapping (I also verified the CSS showed “0” for height in Firebug). They are also overlapping on mobile screens now (both portrait and landscape modes).

Any ideas?

Thanks,
Dave

4

Hey Dave,

I wouldn’t suggest setting the height to zero. Just delete that CSS or set it to default which is auto. You can then remove the large bottom margin applied to the first heading.

Ben

5

Thanks, Ben. I set everything to auto and then just started over with that section. Now everything is working well responsively.

Dave

6

Awesome! Glad I could help. Enjoy The Beaver! :slight_smile:

Ben