Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 1, 2021 at 7:31 pm #1308394
    cd2s

    Hi Kriesi Team

    I am having an issue that on a Portfolio page I have a grid container with an image and a video placed in it. Then followed by a masonry element with large gaps.

    It works well on desktop but on mobile, it does not line up at all. The grid container has a lot more padding than the masonry has. The padding should be like the masonry has. This is the correct one.

    I tried to add a custom css .daimler so I could adjust the padding on that element to be the same as the masonry but I don’t seem to be able to get it to work. It always seems to take the default left/right padding for mobile. If I change that default padding, it changes it for all elements, also the text, which we don’t want.

    Link & details in Private content below.
    Thanks so much for your help.
    Corina

    July 3, 2021 at 4:58 am #1308550
    Rikard

    Hey Corina,

    This CSS is causing that to happen:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto!important;
    overflow: hidden;
    padding-left: 8%!important;
    padding-right: 8%!important;
}
}

    I’m not sure where it’s coming from though, since the CSS is coming from a cached file. Could you turn off caching so that we can see where it’s coming from please?

    Best regards,
    Rikard

    July 5, 2021 at 10:16 am #1308735
    cd2s

    Hi Rikard
    Thank you so much for your help. It’s coming from the grid.css. Caching is now turned off and below a link to the screenshot of where this css sits at.
    https://www.dropbox.com/s/j04p4p1slnu2ob5/Screen%20Shot%202021-07-05%20at%2010.12.21%20am.png?dl=0

    I tried to set this css to 0 instead of the 8% but it applies it to everything (also the text above and on other pages) and that needs to remain the same.

    Thank you.
    Corina

    July 8, 2021 at 12:43 pm #1309254
    Mike

    Hi,
    Sorry for the late reply and thanks for the login to your site, for that one page for mobile please try this css:

    @media only screen and (max-width: 767px) { 
#top.postid-10519 #wrap_all #main #av-layout-grid-3.av-flex-cells .avia-builder-el-9.no_margin,
#top.postid-10519 #wrap_all #main #av-layout-grid-4.av-flex-cells .avia-builder-el-15.no_margin{
padding: 0 15px !important;
}
}

    After applying the css, please clear your browser cache and check.
    If you find this works well we could add a custom ID to each grid row element and a custom class to the video element so that future page changes do not break the css, currently the IDs and classes in the css are the default that may change if the page is updated.

    Best regards,
    Mike

    July 13, 2021 at 3:43 pm #1309978
    cd2s

    Hi Mike

    Thanks so much. It works at the top but the last video still has the massive padding? Also, I tried to do this initially via a custom ID assigned to the grid element before writing and asking for help, but it did not overwrite the standard padding on mobile view.

    Thanks so much.
    Corina

    July 15, 2021 at 12:46 pm #1310259
    Mike

    Hi,
    I checked your page but I don’t see that the css above is activate, but I do see that my error was avia-builder-el-15 should have been avia-builder-el-16
    So to use a custom class with this solution we will add the custom class daimler to the grid cell that has the video element and use the css:

    @media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #main .av-flex-cells .daimler.no_margin {
padding: 0 15px !important;
}
}

    I added this to your Quick CSS, please clear your browser cache and check.

    Best regards,
    Mike

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