Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1077843

    Hi there,

    On mobile the icon grid has a big padding between the title and text. I can’t find the css code to make that smaller.

    Something like:
    .avia-icongrid-flipbox li .avia-icongrid-flipback .avia-icongrid-inner {
    padding: 0px;
    margin-top: 0px;
    }

    Hope you can help me!

    Janneke

    #1078524

    Hey jannnnnneke,

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

    @media only screen and (max-width: 767px) {
    .avia-icongrid-flipbox li .avia-icongrid-flipback .avia-icongrid-inner {
      padding:0;
    }
    }

    Best regards,
    Rikard

    #1078762

    HI Rikard,

    Thanks for your response, unfortunately it doesn’t work!

    Any other ideas how to fix this?

    Thank you!

    #1078915

    Hi,

    Did you add the code to very top of quick css so it runs first? Also, be sure to clear the cache a few times over.

    Best regards,
    Jordan Shannon

    #1079057

    Hi!

    I had only one other css code in styling tab. Added the code now first, but also after clearing cache it doesnt work. This is my whole css styling tab:

    @media only screen and (max-width: 767px) {
    .avia-icongrid-flipbox li .avia-icongrid-flipback .avia-icongrid-inner {
    padding:0;
    }
    }

    #top .main_color .avia-color-theme-color {
    border-color: #4a9a59;
    }

    Tried padding:0; / padding: 0; / padding: 0px; > nothing works.

    See link (mobile version/smaller screen).

    #1079525

    Hi,

    I see that you are using file compression under Enfold->Performance. Please try to delete the old CSS and JS files there to see if that helps.

    Best regards,
    Rikard

    #1081303

    Hi Rikard,

    How can I delete old CSS and JS files? In the Quick CSS I’ve only added the CSS you see above. Should I go to the filemanager/ftp to delete files? Where can I find them?

    Thank you,
    Janneke

    #1082337

    Hi,
    Sorry for the late reply, for your question about deleting your old css in the theme, please try the Theme setting at the bottom of the performance page, it will look like this:
    2019-03-24-130217
    This will remove all but the most current files, I would not recommend deleting them in ftp because then you would have no styling for your site.
    For your question about removing the spacing of your icon grid, I assume the section is in the screenshot I posted in the Private Content area. For this try this css:

    @media only screen and (max-width: 767px) {
    #top.home .avia-icon-grid-container .avia-icongrid-front > .avia-icongrid-inner {
      padding-bottom: 0 !important; 
    }
    #top.home .avia-icon-grid-container .avia-icongrid-front > .avia-icongrid-inner {
      padding-top: 20px !important; 
    }
    #top.home #av_section_5 > .container >.template-page.content {
    padding: 0px !important;
    }
    }

    Best regards,
    Mike

    #1082606

    Hi Mike,

    Deleted the old CSS files and changed the CSS code to the code you sent, but didn’t work. I cleared cache but there is still a big empty space between title and description.

    I removed the old code:

    @media only screen and (max-width: 767px) {
    .avia-icongrid-flipbox li .avia-icongrid-flipback .avia-icongrid-inner {
    padding:0;
    }
    }

    And just added only your code… see site

    #1082969

    Hi,
    Please remove the css and try this instead:

    @media only screen and (max-width: 767px) {
    #top.home .avia-icon-grid-container .avia-icongrid-front > .avia-icongrid-inner {
      padding-bottom: 0 !important; 
    }
    #top.home .avia-icon-grid-container .avia-icongrid-flipback > .avia-icongrid-inner {
      padding-top: 0 !important; 
    padding-bottom: 0px !important; 
    }
    #top.home .avia-icon-grid-container .avia-icongrid-front > .avia-icongrid-inner {
      padding-top: 20px !important; 
    }
    #top.home #av_section_5 > .container >.template-page.content {
    padding: 0px !important;
    }
    }

    Best regards,
    Mike

    #1083130

    Hi Mike,

    Yes! Now it works!! Thank you!

    Only on mobile there is no padding above the first icon and under the last iconbox. The row has a grey background, so it would be nice if there is a little padding/space above and under the icon grid box. Which code could I use or adjust to create this?

    Hope you understand me.

    Thanks!

    Janneke

    #1083132

    I already succeeded! Thanks for your help!

    #1083191

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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

The topic ‘Change mobile padding icon grid’ is closed to new replies.