Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 11, 2022 at 7:52 pm #1351433
    madakumbu

    Hello Team

    I’ve a page with 5 sections using a grid element.
    Each one has 4 cells, 2 with a background image and 2 with block text and colour background.

    I have done the following steps that you told me about another topic some time ago:

    1- I have added an image inside those grids (same as the background) then hidden it in large screens and medium sized screens in Element Visibility (under Advanced > Responsive).
    2- And in the cell that contain the image, I added no-padding in Custom CSS Class (under Advanced > Developer Settings).
    3- Then added this CSS code in Enfold > General Styling > Quick CSS.

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

    It looks fine on the computer screen, but not on mobiles on VERTICAL position (tested on 6,55px and 5.65px mobile).
    How can I fix it?

    I send you, in private, the link to the page, one mobile screenshot and also password if neccessary.
    MANY Thanks in advance :)

    May 12, 2022 at 6:41 am #1351469
    Ismael

    Hey Magdalena,

    Thank you for the inquiry.

    Are you referring to the padding surrounding the image? Please try to add this css to remove the default padding of the cells. Make sure to add the code inside the existing css media query for mobile view.

    .responsive #top #wrap_all .av-flex-cells .no_margin {
    padding: 0 !important;
}

    Best regards,
    Ismael

    May 12, 2022 at 10:29 am #1351527
    madakumbu

    Thanks @Ismael

    It is ok , now it works perfectly :)

    Otherwise, now, another page with two grids and background images and text appears very “little” on MOBILE LANDSCAPE;
    Before today it was ok

    How can I to fix it again?

    I send you, in private, another link to the page, some mobile screenshots and also password if neccessary.

    Regards

    May 12, 2022 at 5:35 pm #1351590
    madakumbu

    Hello @Ismael
    I have added the custom code you said, with the code block element directly inside the page
    It has well worked,

    This is what I have added:
    <style>
    .responsive #top #wrap_all .av-flex-cells .no_margin {
    padding: 0 !important;
    }
    </style>

    So please, forget my last question so you can close this thread
    Thanks for your help
    Regards

    May 14, 2022 at 12:44 pm #1351763
    Mike

    Hi,
    Glad Ismael could 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 5 posts - 1 through 5 (of 5 total)
  • The topic ‘GRID element and background images’ is closed to new replies.