Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 30, 2023 at 9:35 pm #1395966
    sitesme

    Hello,

    I have two icons next to each other, on the same line, left aligned and inline.
    The right icon is slightly higher than the left one. How can I have them both perfectly aligned horizontally? Screenshot and page in private for reference.

    Thank you

    January 31, 2023 at 12:11 pm #1396014
    Yigit

    Hey,

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

    
.av_font_icon.av-ldae6tf0-67586ebde7d1dfedc43bd17b720f4487 {
  margin-top: 1px;
}

    Best regards,
    Yigit

    May 19, 2023 at 12:44 pm #1407938
    sitesme

    Hi @Yigit,

    The code above worked.
    We have a new problem now in a different area. Please check in PVT the page. Can you please give me the code to align both social media icons? Instagram icon is slightly higher than linkedin, not inline.

    Thank you

    May 19, 2023 at 8:48 pm #1407978
    Rikard

    Hi,

    Please try this CSS as well:

    
span.av-lht1scpx-754ac00d9a6881c8c895d0471d090fbb {
  margin-top: -2px;
}

    Best regards,
    Rikard

    May 20, 2023 at 7:57 pm #1408026
    sitesme

    Thanks, Rikard. That worked :)

    Now, on mobile, I can only make the same icons look fine if I align them to the right/left. If I center them, they will show one above the other, never side-by-side. Is there any easy way to center both icons and vertically aligned correctly?

    Please see the screenshot in PVT.

    May 21, 2023 at 2:10 pm #1408060
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 989px) { 
#mobile_footer .flex_column {
	text-align: center;
}
#mobile_footer .av_font_icon {
    display: inline-flex;
    margin: auto;
}
#mobile_footer .avia-icon-pos-right {
    float: none;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 22, 2023 at 12:45 pm #1408129
    sitesme

    Thank you, @Mike.
    Your code is near perfection.
    The only problem is the second icon (Instagram) is 1-2 pixels above Linkedin on mobile. Can you please give me the code to fix this small misalignment?

    Thank you

    May 22, 2023 at 3:06 pm #1408149
    Nikko

    Hi sitesme,

    Please try to put this code inside the Media Query @media only screen and (max-width: 989px):

    #mobile_footer .flex_column > .av_font_icon:first-child > a {
    position: relative;
    top: -2px;
}

    Best regards,
    Nikko

    May 23, 2023 at 12:05 pm #1408238
    sitesme

    Thanks, @Nikko

    I think your code was working when I was opening the footer page directly, but now that I assigned that page to the footer/socket under Enfold options, the code is no longer working. No matter what value I change (-2px), it doesn’t move at all.

    Can you please check the page in PVT and see if this code needs to be changed for the footer area?

    Thank you

    May 23, 2023 at 4:41 pm #1408297
    Nikko

    Hi sitesme,

    Please remove the code I gave you and replace it with:

    #mobile_footer .flex_column .av_font_icon.av-43trzw-4e90d63b2d0af8a326a482a0a72f4edb a {
    position: relative;
    top: -2px;
}

    Best regards,
    Nikko

    May 23, 2023 at 8:07 pm #1408331
    sitesme

    That worked, @Nikko, thank you.

    Any idea why the code had to change from av_font_icon:first-child to av_font_icon.av-43trzw-4e90d63b2d0af8a326a482a0a72f4edb ?

    May 24, 2023 at 2:56 am #1408344
    Nikko

    Hi sitesme,

    The first code I gave only works if .av_font_icon is the first element in the column, however, since it is moved, :first-child cannot be used, the only alternative was to use a unique identifier/class name which is why I changed it to .av_font_icon.av-43trzw-4e90d63b2d0af8a326a482a0a72f4edb, you can see this unique class name when you right click and inspect the icon.

    Best regards,
    Nikko

    May 24, 2023 at 5:11 pm #1408457
    sitesme

    Thanks @Nikko.

    Is there a way we can force the identifier/class somehow by using the class or ID attributes in the developers section of each element?
    Could you have a look at the page in PVT and see if these identifiers can be simplified? It is for the social icons in the socket area.
    Thank you

    May 25, 2023 at 9:42 am #1408503
    Nikko

    Hi,

    Yes, since it has an ID linkedinmobile, you can simply add this CSS code for it:

    #mobile_footer .flex_column #linkedinmobile {
    position: relative;
    top: -2px;
}

    Best regards,
    Nikko

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