Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1364091

    I have a Grid Row > Styling > Padding > Cell Padding Right: 150px and Left 150px – Looks great on desktop but when viewing on mobile, its taking up the screen and making the single cell very thin – When I tried adding in some mobile queries in the css, it seemed like my !Important was being overwrote by another !Important and my custom css was not taking effect.

    What would be the correct CSS to remove the left and right padding on this grid row on mobile?
    I am seeing
    .responsive #top #wrap_all .flex_cell.av-aqwgup-26806c027b3da83594490f55e9e68bbf {
    padding: 10px 150px 60px 150px !important;
    }

    I would even be happy if the entire site used padding: 10px 20px 60px 20px !important;
    and just had 20px left and right -(I want to make this change via css since I used this cell on other pages and I dont want to have to have to go page by page and update the spacing manfully)

    Mobile screenshot with space that needs to go away or lessen on left and right: https://justpaste.it/8n1lx

    Thanks for help!

    • This topic was modified 2 years, 3 months ago by akakacey.
    #1364105

    Hey Kacey,

    You have the option to set different padding for different types of screen sizes in the element options. Did you try that out?

    Best regards,
    Rikard

    #1364139

    be more precise in your description. Describe the layout in a little more detail. It is hard to speculate what was set as the basis to this screenshot.
    So this is a grid-row? with only one cell? In it a 1/1 container? etc. pp

    btw:
    why don’t you use relative paddiing values – your are not forced to set px values. Try f.e.: 10%
    so you got 150px padding at 1500px container width – and 30px on 300px container width.

    #1364223

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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