Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 25, 2021 at 5:17 pm #1302262
    Technohead

    Hi!
    I have a tiny problem. I have made a small iconlist with social media icons in the footer of a page and it looks fine. But on mobile (iPhone 12) the icons are a little off center in the circle. Is it possible to get it right on the mobile as well?

    Regards,
    Roger

    May 25, 2021 at 9:45 pm #1302315
    Jordan Shannon

    Hey Technohead,

    Can you screenshot the issue so we can look into this issue further? I’m not seeing the issue.

    Best regards,
    Jordan Shannon

    May 26, 2021 at 9:53 am #1302386
    Technohead

    Hi there!

    Yes, links for three different images are attached in private section to show the social icons.
    I have tried various CSS but never been able to align them perfectly centered on all platforms and screen sizes.

    The desktop version looks good in Chrome on Mac.
    On the resized window in Chrome on Mac the icons are slightly off.
    In Chrome on an iPhone 12 Pro Max the icons are more off.

    Regards, Roger

    June 1, 2021 at 10:29 am #1303377
    Technohead

    Hi,
    Any news on this?
    I am heading towards deadline pretty soon and would very much like everything to look ok when presenting the site for the client.

    Regards,
    Roger

    June 1, 2021 at 10:56 pm #1303474
    Yigit

    Hi Roger,

    I am sorry for the late reply!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 990px) {
.footer-icon .avia-icon-list .iconlist_icon {
    line-height: 29px;
}
}

    If that does not help, could you please point out the exact changes you would like to make on your screenshots? I am afraid I am not able to clearly see the difference if the code above does not help.

    Best regards,
    Yigit

    • This reply was modified 3 years, 6 months ago by Yigit.
    June 2, 2021 at 10:39 am #1303544
    Technohead

    Hi Yigit!

    Unfortunately I could see no change on my iPhone 12 Max (Chrome). ​At the moment that’s the only phone I can test on. No change in the resized window either, but that´s not as important and is not so obviously off either.

    I attached a couple of dropbox links to a screenshot from my iPhone, where I have cropped into the icon section. There you can clearly see that the Instagram and Facebook icons are not centered. Hope this helps.

    Btw, you code snippet scared me half to death at first. It’s missing a } at the end and all my custom CSS was disabled and everything looked like..well.. not good. Took me a few secs to realize what happened :)

    Regards, Roger

    June 2, 2021 at 11:59 am #1303570
    Yigit

    Hi,

    My bad, I didn’t realize I forgot to close media query. I updated the code above for future readers. Thanks :)

    The code I posted should have adjusted exactly that. Could you please try adding !important rule as following and check if that helps?

    @media only screen and (max-width: 480px) { 
.footer-icon .avia-icon-list .iconlist_icon {
    line-height: 28px !important;
}}

    Please make sure to disable CSS file merging and compression in Enfold theme options > Performance temporarily and flush cache as well

    Best regards,
    Yigit

    June 3, 2021 at 3:39 pm #1303797
    Technohead

    Hi Yigit!

    Thank you, the important rule worked fine.
    You guys are just the best!

    You can close this thread now.

    Regards, Roger

    June 3, 2021 at 3:40 pm #1303799
    Yigit

    Hi,

    You are welcome, Roger!

    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Different spacing for iconlist on mobile.’ is closed to new replies.