-
Posts
-
Hello.
I’m trying to have 3 icons inline within a 1/3 layout element. The right icon is not aligned with the left and center icons – it falls below probably on a different line. I’ve tried doing the icon elements by themselves within a layout element and I’ve tried the icons within a text block, which yields the same result. Please see the footer (I used a custom footer page) in the website link provided in the private content to see what it is doing. Any ideas?
Thanks,
JennHi Jenn,
Where exactly are you trying to do this? I couldn’t see any problems like that on your front page. Please try to explain a bit further and post admin login details in private so that we can have a closer look.
Best regards,
RikardHi Rikard,
I have replicated the issue on a live testing website, so that’s the only content on the page. I’ve done it two different ways – 1st with just icon elements within a layout element and a 2nd-way with icons within a text block. This should clearly show you what I’m running up against. This happens on both desktop and mobile and different browser types.
I’ve included admin credentials in private. Feel free to mess around – it’s just a testing website.
Thanks,
JennHi Jenn,
Thanks for that, I can access the backend fine but when I try to edit the page in question it just never loads. I’m not sure why unfortunately. Could you try to remove any line breaks in the editor to see if that helps please? Have the spans on the same line, that should hopefully remove that space.
Best regards,
RikardHi Rikard,
Not sure why you had loading problems – sorry to hear that. I just tested with the provided credentials and it loads just fine. Perhaps it was a server issue when you happened to try. Would you mind trying again? I deactivated the security plugin just in case that had anything to do with it.
I did try to remove any line breaks – everything is on the same line within the text block, but it still does the same thing. The Instagram icon is sitting lower than the other two icons.
Thank you,
JennHi Jenn,
I’m sorry but I couldn’t find the reason for the problem you are having, what does work though is if you place the instagram icon first. I have done so on your example page. It might not be the best solution but it works at least.
Best regards,
RikardHi Rikard,
That’s a creative solution and it works, so I’m happy with that. The icons are now inline on the same line. Thank you so much.
But, there seems to be another related issue. Each icon is set to manually go to the URL for the corresponding social media site, but they are all defaulting to the YouTube link. If you look at the set-up of each icon, the URL’s are correct, but when you click on the live icon, they all go to YouTube. What’s happening there?
Jenn
Hi Jenn,
The css makes the span with the icon 100% and so it covers other icons and just shows the link to youtube.
Best regards,
VictoriaHi Victoria,
Ok, so essentially because of the code limitations, this doesn’t work as I have tried and assume it should? If so, I’m ok with that and I will create a different way to do what I want. I just wanted to try to use icons inline within one layout element. From what you are saying, I see that I would need one icon per layout element to have the links work correctly.
Please let me know if this is indeed the case. I was thinking it was a bug. Is there a quick CSS piece of code to adjust this?
Thanks,
JennHi,
Sorry for the late reply, I took a look at your test page and see that the YouTube icon link was full width covering the others, this css would correct:#top.page-id-162 span.av_font_icon { width: 40px !important; margin: auto !important; }This is designed to only work on the test page #top.page-id-162 it would be better if the icons had a custom class so to not interfere with other icons on the site. Do you mean that you would like all 3 to be in a 1/3 element, such as in a footer widget?
I added the css to your test page and made the element 1/3 so you could see.Best regards,
MikeHi Mike,
Thank you for your reply. Nice job! You found a way to fix that one icon link from taking over for the rest. I see what you did with the CSS in the code block. I can understand reading some CSS, but I am unable to write my own. Yes, I’d like all 3 icons within a 1/3 element to be used in a custom footer type situation.
In order to control by section instead of by page, would I be able to give a Section ID to a color section and then put some CSS in the Enfold Quick CSS section? I attempted the start of this on the test page we’ve been working on, but don’t know enough to tweak the code for the Quick CSS part.
Thanks for all the help!
JennHi,
Glad to hear, yes you could add a section ID, or if this is going to be in a widget in the footer each widget has a unique ID, so you could control it that way.
Or even easier is to enable custom classes for your elements at: Enfold Theme Options > Layout Builder > Show element options for developers
I did this for you on your test site.
and then adjusted your code block css with the new class “footer-icons”, which could be added to your Quick CSS instead.
Please review.PS. if you copy the code block css don’t use the:
<style> </style>tags, it’s only there to make the css work in a code block :)
Best regards,
MikeThanks, Mike!
I’m going to stick with the custom classes for the icons and the code block. That works great! I didn’t know that was available.
I’m good to go now. You can close this ticket. Thanks again to you and Rikard for helping me with both issues.
Jenn
- The topic ‘Icon inline problem’ is closed to new replies.