Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #650728

    Hi,

    I am trying to remove a padding on mobile view on the following website:

    anchor-relocation.ch

    I’ve manually made a footer, which I inserted via Template on every page. The reason is that the existing footer didn’t do what we needed it to do.

    It all looks good on the big screen, but as soon as I resize it to mobile view, the “AR” logo and the Address have a padding. I don’t seem to be able to figure out how to remove that… would appreciate your help.

    Thanks so much & kindest Regards,
    Corina

    #651275

    Hi Corina,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (min-width: 768px) and (max-width: 990px) {
    #av-layout-grid-1 {
    padding-left:30px;
    }
    }

    Regards,
    Rikard

    #651280

    Hi Rikard

    I just tried this, and it doesn’t seem to change anything…. I’ve posted login details below in case that helps.

    Thanks so much.
    Corina

    #651904

    Hi,

    Login details are not working, please check and verify.

    You can try this CSS to see if it works better:

    @media only screen and (min-width: 768px) and (max-width: 990px) {
    #av-layout-grid-1 {
    padding-left:30px !important;
    }
    }

    Thanks,
    Rikard

    • This reply was modified 4 years, 4 months ago by  Rikard.
    #651906

    ups typo….

    #651910

    Hi Rikard
    Sorry.. just tried your code, it is still there… if you compare the “AR Logo & Address”, it has a lot more padding/margin than the SARA logo below (on mobile screen that is).
    Thanks so much.
    Corina

    #652163

    Hi!

    Please add following code to Quick CSS

    @media only screen and (max-width: 480px) {
    .responsive #top #wrap_all .av-flex-cells .no_margin {
        padding-left: 1%!important;}}

    Regards,
    Yigit

    #652471

    Hi Yigit

    Thanks so much, just implemented it and it does but it doesn’t work…. it removes the padding that is there on the first image (on the left) but it moves all the other grid rows all the way to the left as well on mobile view. if you look on mobile, what I’d like them to be is the same width as the blue line just above.

    I took a screenshot on how I configured it in the backend. https://www.dropbox.com/s/vk1dxs6sl4vss9b/2016-06-23_13-33-23.png?dl=0

    Thanks so much.
    Corina

    #653458

    Hi,

    Please use this instead:

    @media only screen and (max-width: 480px) {
    #av-layout-grid-1 .flex_cell:nth-child(1) .flex_column {
        padding-left: 8% !important;
        padding-right: 8% !important;
    }
    }

    Best regards,
    Ismael

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.