1024 break is messed up

Author Posts

eno812 April 23, 2020 at 12:45 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Just recently I’ve noticed on this breakpoint, 1024 the settings I’ve created don’t seem to be doing anything. Getting all sorts of weird stuff happening. It shows properly when viewed in MT but when viewed on the iPad it’s not. Also, it’s showing the same problem for large devices in MT but not on actual large devices. Please email me so I can give you more details.

Sebastian April 23, 2020 at 10:09 am

Hey,

Thanks, I got the access details you sent. I noticed MT wasn’t working correctly due to a conflict with the Siteground optimizer plugin. See the workaround for that here.

Regarding your iPad styling issue
I can see that there is a big gap under your Products and Services button. Is that what you mean? This gap shows when I check the site outside Microthemer, and when using Chrome dev tools to spoof an iPad, simply because there is more vertical screen height outside of MT. If you click the MT logo at the top left to minimise the toolbar, the extra margin shows in MT too.

So why the extra height? It’s because of some CSS code that probably comes from Beaver Builder:

.fl-node-5d31385ab9a4c>.fl-row-content-wrap {
    min-height: 100vh;
}

The min-height:100vh rule makes the top banner the full height of the screen. You could change that in Beaver Builder, or by creating a selector in MT and overriding the min-height setting. In fact I’ve created the selector for you:

Header >> Header Container

So you can go ahead and set the min-height to e.g. zero if I am on the right track about what isn’t looking right on iPad. If I’m way off, could you clarify which elements are not displaying correctly please?

Thanks,
Sebastian

Sebastian April 23, 2020 at 10:19 am

P.S. as a non-customer I haven’t been able to get through to Siteground via their chat system. If you can spare the time, it would be great to ask them to add the following CSS file to their internal “Combine CSS Files” ignore list if Microthemer is active:

/plugins/microthemer/css/frontend.min.css
/wp-content/micro-themes/min.active-styles.css

That would save you and other Microthemer users from having to do this manually on each new site.

Thanks!
Sebastian

eno812 April 25, 2020 at 2:19 am

I’ve been meaning to thank you for this, so thank you, it fixed the issue. I will contact SG and let them know about this today.

Thanks again.

eno812 April 25, 2020 at 5:19 am

It was just heading and paragraph on the home page that had too much padding on them for that break, 1024. When I viewed the large device on MT it showed the same issue but when I looked on an actual large monitor it was not showing the same as MT.

Sebastian April 25, 2020 at 9:50 am

Ah I see OK. But that’s sort now right?

And thanks for offering to contact SG, I’m very interested to hear what they have to say!

eno812 April 25, 2020 at 10:51 pm

All they said is they will pass it onto the SG Optimizer team. I’ll follow up in a couple of weeks and see what they say.

Sebastian April 27, 2020 at 1:17 pm

OK thanks for chasing!

You must login or register to reply to this topic.