-
Posts
-
Hi
Referring to post #655405 about horizontal icon list. After applying custom CSS it woks perfectly but it doesn’t display any caption/title, Is there a way to have that meaning to display small text below the icon. In normal icon list text is at left or right but now it doesnt (normal as icons ar horizontal). Maybe some aditional Css for text too :)
Example
O
–Thank you very much
Hey hdpcr,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
YigitHi Yigit
There you go. You can check with plugins, Actually i using very few. While you are on this i have noticed when i create the horizontal icon list with more than 3 elements it displays the 4th blank (just the circle) then the rest ok. I have to edit the list replace the icon with any other and save, then go back and put back the same icon again and it works.Weird.
Thank you very much
Hi,
Please add following code to Quick CSS as well
.my-custom-iconlist1 .iconlist_content_wrap { overflow: visible!important; }and regarding fourth icon, it does show up fine on my end. Can you please elaborate on the issue you are having? :)
Best regards,
YigitHi Yigit
Thank you for the additional code. It displays both title and content. But the Title is not aligned to to left bu default. Is there a way to center it? (you can see in the same updated page.
Thank you very much
Hi,
Please add following code to Quick CSS as well
.my-custom-iconlist1 .iconlist_title, .my-custom-iconlist1 .iconlist_content { text-align: center; }Best regards,
YigitHi Yigit
I have added the last CSS and it doesn’t center the Title yet.Still the same.
Thank you very much
Hi,
You have following code in Quick CSS
.my-custom-iconlist1 .iconlist_icon { margin-right: 20px; }Removing margin right value could help. This is currently how it looks on my end
Best regards,
YigitHi Yigit
So what you are saying i have to remove previously added CSS that control margin? I saw the screen shot and its not totally centered.
Thank you very much
Hey!
Yes, if you remove right margin value text will be centered. Then you can add following code to Quick CSS increase margin between icons
.my-custom-iconlist1 ul.avia-icon-list li { margin-right: 20px; }Best regards,
YigitHi
I did but it didnt work this is the CSS i have/*Horizontal Iconlist and size control*/
.my-custom-iconlist1 ul.avia-icon-list li {
float: left;
clear: none;
}
.my-custom-iconlist1 .iconlist-char {
font-size: 40px;
}
.my-custom-iconlist1 .iconlist-timeline {
display: none;
}
.my-custom-iconlist1 .iconlist_icon {
height: 60px;
width: 60px;
line-height: 60px;
}
.my-custom-iconlist1 ul.avia-icon-list li {
margin-right: 20px;
}
.my-custom-iconlist1 .iconlist_content_wrap {
overflow: visible!important;
}
.my-custom-iconlist1 .iconlist_title, .my-custom-iconlist1 .iconlist_content {
text-align: center;
}Hey!
Can you please add following one as well
.my-custom-iconlist1 .iconlist_icon { margin: auto; }Best regards,
YigitHi Yigit
It worked fine. Thank you so much. Please do not close this post yet as i will use this in a real page and layouts if something else comes up.
Thank you
Hi Yigit
Last thing. Is it possible to center the whole block of iconlist in a page or section? If i insert them in the Avia editor the set of icons is aligned to the left. I tried to insert them as shortcode in a text block and add div in the top bt it doest work.
Thank you very much
Hey!
Please edit your section and insert three 1/3 column elements into it and place your icon list element in the middle and leave the ones on the sides empty :)
Regards,
YigitHi Yigit
I already did that before asking and it really doesnt help . f i have many icons yes it looks like centered but with a few no . And if i have before a color section content that centers in the whole screen its worst :)
Thank you very much
Hey!
Well, it is going to be a little bit complicated but please try adding one of the following code to Quick CSS
@media only screen and (min-width: 1024px) { .my-custom-iconlist1 { width: 325px; margin: auto; }}or
@media only screen and (min-width: 1024px) { .my-custom-iconlist1 { left: 35%; position: relative; }}Best regards,
YigitHi
The first code seems to be better but it in center the icon list in 325 space with is good for 4 icons and if i have more it break into a second row of icons.If im using full with or color section it waist space. But still very useful to center the block in columns as i tried before and you suggested too.
Its Ok, i understand that its complicated so no worries to find a code for this. If in the future you have some workaround please let me know :)
Now is it possible to achieve the same purpose with inline icons? To have 6 o 7 icons one next other separated by one or 2 spaces, centered in full with or color section, or column?Thank you very much.
Hi,
Insert a text block then add the icon shortcodes manually. Wrap each icons inside a div container. Something like this:
<div class="av_one_seventh first">[av_font_icon icon='ue800' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]</div> <div class="av_one_seventh">[av_font_icon icon='ue800' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]</div> <div class="av_one_seventh">[av_font_icon icon='ue800' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]</div> <div class="av_one_seventh">[av_font_icon icon='ue800' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]</div> <div class="av_one_seventh">[av_font_icon icon='ue800' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]</div> <div class="av_one_seventh">[av_font_icon icon='ue800' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]</div> <div class="av_one_seventh">[av_font_icon icon='ue800' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' custom_class=''][/av_font_icon]</div>After, add this in the Quick CSS field:
.av_one_seventh { width: 12%; margin-left: 1%; float: left; } .av_one_seventh.first { margin-left: 0; }Best regards,
Ismael
- You must be logged in to reply to this topic.