Archived topic
Merged Header Content Overlap Elementor
4 replies · Started by David on December 12, 2018
Hi,
I'm having a ton of trouble figuring out why my site is not auto adjusting for tablet/mobile when using merged header and editing using elementor.
My site is: http://www.dgsportsmassage.co.uk
You can see as you adjust the browser window down to mobile size, or view on mobile/tablets that there is huge content overlap.
I simply cannot figure out how to stop this and get the theme responding properly to different devices / browser window sizes.
Anyone have suggestions to fix this?
Hi there,
in Elementor, the majority of the settings including margins / padding / font-sizes have tablet and mobile options. If you go into their responsive views for tablet or mobile, you can adjust those for that device size.
I would recommend decreasing the font sizes and improving your padding for the mobile and tablet versions.
So I can't have a global thing that adjusts to different devices? This would presume that I have to do this on every individual page in elementor?
Just further to this, in elementor changing padding for the content doesn't do much to put it underneath the logo header without dramatically shrinking the actual content down. I'm confused why it adjusts correctly for tablet but does not adjust for mobile?
The desktop and tablet provides enough height to accomodate the content. On the narrower mobile device the text wraps and fills a greater height.
Edit the Elementor Column containing the iamge and text, go to Advanced Tab, select the mobile responsive view and increase just the Top margin or padding until it clears the site header.
The alternatives are to reduce the content size on mobile.
With Elementor the mobile and tablet modes automatically gain the desktop settings.When i have to use it i do the following:
1. Set up my row and columns.
2. Load with dummy content headers etc with my default font sizes.
3. Switch to tablet view and tune all styling: sizes, padding etc. Repeat this for mobile.
4. Then i do the major changes for Desktop.
5. Save this as a template.
6. Rinse and repeat ( using this base template ) for the various row layouts you need.
You have to build the responsive settings in first with Elementor otherwise you end up having to manually correct every section after its built.....
