Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1395966

    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

    #1396014

    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

    #1407938

    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

    #1407978

    Hi,

    Please try this CSS as well:

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

    Best regards,
    Rikard

    #1408026

    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.

    #1408060

    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

    #1408129

    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

    #1408149

    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

    #1408238

    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

    #1408297

    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

    #1408331

    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 ?

    #1408344

    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

    #1408457

    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

    #1408503

    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

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