Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 8, 2022 at 9:39 pm #1368077
    HulaSlim

    Dear Team,
    I don’t achieve finding a way to fix this. On my homepage, after the video (under the slideshow), I have a regular space before a titles underneath that keeps showing in overlay on the video on a smartphone preview. To avoid this, I need to put a padding of 100 which is barely enough to separate it from the title on a smartphone but that is too much for the computer, compared to the other spaces. Is there a way to force a bigger gap only on smartphones ?
    Thanks
    Best
    Natacha

    October 8, 2022 at 9:50 pm #1368078
    HulaSlim
    This reply has been marked as private.
    October 9, 2022 at 8:51 pm #1368165
    Mike

    Hi,
    Thank you for the link to your pages, for the first one I added this css:

    @media only screen and (max-width: 767px) { 
#top.home .hr.avia-builder-el-8 {
    margin-top: 60%;
}
}

    for the second one, I see that your icons are hidden on mobile but the columns they are in are not so the empty columns take some space, I set the columns to also be hidden on mobile and now there is no extra space.

    Best regards,
    Mike

    October 9, 2022 at 10:46 pm #1368175
    HulaSlim

    Hi Mike,
    Thank you for the setting. The overlay is still there. I searched for the code but didn’t find it. I tried to put it in both the cideo and the colum containing it, but nothing changes. Where did you put it ?
    Kind regards,
    Natacha

    October 9, 2022 at 11:13 pm #1368178
    Mike

    Hi,
    The code is in the Quick CSS, it looks like you removed the hr that was above the “LIEUX HISTORIQUES BERNE – JURA” the css was set to it.
    So now we will use the css on the heading, please add this css to your quick css:

    @media only screen and (max-width: 767px) { 
#top.home .av-special-heading.avia-builder-el-9   {
    margin-top: 60%;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    October 10, 2022 at 3:42 am #1368186
    HulaSlim

    Hi Mike,
    Thank you for the tip. I’ve noted it.
    So now the title is perfectly in its place under the video. But on smartphones, the play button is inactive. I purged the cache, checked in the video settings, and can’t find what’s wrong.
    Could you please have a look on this ? Thanks again.
    Best regards,
    Natacha

    October 10, 2022 at 1:35 pm #1368270
    Mike

    Hi,
    I found that the margin of the column below the video was overlapping the video, preventing a click on the video, I added this css in your Quick CSS to change the z-index of the video so it is on top, now you can click the video, please clear your browser cache and check.

    @media only screen and (max-width: 767px) { 
#top.home .avia-builder-el-5 .avia-video {
    z-index: 3;
    position: relative;
}
#top.home .avia-builder-el-8 {
	z-index: 0;
	position: relative;
}
}

    Best regards,
    Mike

    October 10, 2022 at 2:47 pm #1368284
    HulaSlim

    Hi Mike,
    It works now ! Thanks very much for your precious help.
    Natacha

    October 10, 2022 at 7:54 pm #1368337
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Space irregularity in responsive mode’ is closed to new replies.