Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 2, 2017 at 6:26 pm #728715
    DaveA

    Hello,

    I’m using the Enfold Medical theme template. On the ‘Welcome’ page there is a -200px margin to allow the image and content boxes to overlap the image and sit ‘above’ it. When viewing on mobile this causes problems for me as they overlap the image too much. I want to remove the -200px top margin on mobile but am struggling to do this using a Custom CSS class.

    This is a link to the theme I am using.

    Welcome

    This is how I want it to look on mobile i.e. no -200px margin:

    https://postimg.org/image/fgu1ommpb/

    Could anyone help at all?

    January 2, 2017 at 11:00 pm #728775
    Nikko

    Hey DaveA,

    Try adding this in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .home #av_section_1 .flex_column_table {
    margin-top: -110px !important;
  }
}

    Just adjust the value as you see fit. Hope this helps :)

    Best regards,
    Nikko

    January 3, 2017 at 4:18 pm #729039
    DaveA

    That worked great, thank you! Is there away to only apply it to the homepage and not other pages using the same feature?

    Thanks,

    January 3, 2017 at 4:26 pm #729045
    Yigit

    Hi!

    Because of the selector Nikko provided, it would be applied only on homepage actually :)
    If that is not what you meant, can you please elaborate?

    Cheers!
    Yigit

    January 6, 2017 at 11:45 am #730267
    DaveA

    Hi, you were correct and it did only apply to the home page.

    I’ve realized that the code created another issue however. It now overlaps with the ‘Icon Boxes’ below it. Hopefully this image should illustrate it. How can this be fixed?

    https://s29.postimg.org/gc5msq1jb/Capture.jpg

    Thank you,

    January 6, 2017 at 1:35 pm #730331
    Yigit

    Hi,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Yigit

    January 6, 2017 at 1:39 pm #730336
    DaveA

    Hello,

    The link should be hidden and attached.

    Many thanks,

    January 9, 2017 at 7:27 am #730999
    Ismael

    Hi,

    Please adjust the code a bit.

    @media only screen and (max-width: 767px) {
.home #av_section_1 .flex_column_table:first-child {
    margin-top: -110px !important;
}
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.