Strange overlapping in mobile view

Support
#1

I was working on a new layout for my business site today, first time working in X Pro. Everything was going great until I started adding in an Essential Grid, now I am getting some really odd overlaps in my mobile view. Unfortunately, I do not have the time to hunt through the source to figure out what is wrong here. Can I get a little help perhaps? :slight_smile:

#2

I should mention, even after removing the essential grid elements and moving stuff around I am still getting this issue.

#3

Hello @kickinrad,

Thanks for asking. :slight_smile:

Can you please try removing inline height CSS you have added to section and then see how it goes? https://cloudup.com/cigPrqniIxo

Thanks.

#4

Yeah, I probably should have mentioned I tried messing with that some. Sorry!

If I remove the CSS from each section it does fix it.

However, it seemed to be working fine earlier and at some point it started rendering differently on the lower page width.

Also, I kinda wanna keep that full height design style going on for my front page.

Any ideas, besides just adding breakpoints with a different styling?

#5

Hello @kickinrad,

Thanks for updating the thread.

If you want to keep the CSS height property then you can use CSS media query and let the effect of the same be nullified using media query. First i suggest you to assign class name to sections under Customize > Class.

After that you can add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .section-class {
    height: auto !important;
}
}

You can replace class name in above code section-class as per your choice.

Thanks.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.