Overlapping sections/rows & slider text not aligned correctly on mobile. - Support

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
July 23, 2020 at 6:23 pm #1232736

PopMarketing
Participant

1. I am having an issue with the Enfold Spa demo where a section on my homepage is overlapping the rows above and below it and covering content.
2. The slider title text on mobile is setting at the bottom of the slides and on top of the navigation bullets on the slide but I have the tile & caption centered

The overlapping is on a section with an image background and title & text. The title is ” Our Areas of Speciality Include: “.

The slider text on the mobile issue is on the homepage also. I need to know why that slider text is not center-aligned/ center vertical on mobile but is on desktop.
I can adjust the text with CSS but if there’s a setting that I am not finding then maybe you can point me in the right direction.

Thank you for looking into this for me.

July 27, 2020 at 3:01 pm #1233525
Ismael
Moderator
Hey PopMarketing,

Thank you for the inquiry.

We can’t see the content overlap issue on the home page and slider caption is already center aligned. Did you add this css code?
```
#top div .caption_center .slideshow_caption {
	text-align: center;
}
```
Please provide a screenshot of the issue using imgur or dropbox.

Best regards,
Ismael
July 27, 2020 at 3:04 pm #1233526

PopMarketing
Participant

That’s because I have 10% padding on it on desktop but you can definitely see both of those issues on mobile. I’m looking at them right now.

July 27, 2020 at 3:06 pm #1233527

PopMarketing
Participant

Oh and I’m talking about center vertical centered in the middle of the slide like it is on desktop, if you look on mobile you see that the slider heading is at the bottom of the slide and is not like the desktop view and alignment. Thanks

July 30, 2020 at 4:53 am #1234052
Ismael
Moderator
Hi,

Thank you for the clarification.

We can now see the issue on mobile view. To fix it, we can remove the top padding with css and use css media queries so that the style changes will only be applied on smaller screens.

Add this code in the Quick CSS field or the style.css file.
```
@media only screen and (max-width: 767px) {
.html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption        {
	padding-top: 0;
}
}
```
Please don’t forget to toggle the Performance > File Compression settings after adding the code.

Best regards,
Ismael
July 30, 2020 at 2:35 pm #1234163

PopMarketing
Participant

This reply has been marked as private.

August 3, 2020 at 6:23 am #1234713
Ismael
Moderator
Hi,

Thank you for the info.

The overlap is caused by this css property which is applied in the parent column.
```
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
```
Did you add the css code? To override it, we can use this css code.
```
.responsive #top #wrap_all .flex_column {
   -webkit-transform: scale(1) !important;
   -ms-transform: scale(1) !important;
   transform: scale(1) !important;
}
```
Best regards,
Ismael
August 3, 2020 at 2:30 pm #1234861

PopMarketing
Participant

Thank you Ismael, I did not add that CSS. I assume that was for that particular demo the client wanted.
The CSS you gave me worked great.
Thank you for your help, it is greatly appreciated. Have a great day! :)

August 3, 2020 at 8:32 pm #1234950

Jordan Shannon
Inactive Moderator

Hi,

I’m glad this was resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Overlapping sections/rows & slider text not aligned correctly on mobile.’ is closed to new replies.