![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 4, 2016 at 1:31 pm #627200
Hi Kriesi
I am having a situation in resizing all my icons i use with iconbox
If i resize one iconbox icons that others change as well, so one looks gaad but the rest are all off.
I would just like all of my icons to be bigger and the same size.So as an example i used
#top .iconbox .iconbox_icon { width: 45px; height: 45px; line-height: 45px; font-size: 40px; }
that took care of the “Why Choose Us” part on my homepage but now the rest of my icons are not aligned correctly.
Is there a way to have them all the same size? so the icons on placed above would be the same size as icons placed to the left or right of content, how can i style them individually?
Just need the correct CSS to use here, if you could point me in the right direction or maybe another post.
Thank you for your timeMay 7, 2016 at 4:02 am #628530Hey indieweb,
Thank you for using Enfold
Please turn on the custom class field so that you can style each iconbox element individually: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelMay 7, 2016 at 9:44 pm #628696Hi Ismael
Thank you for steering me in the right direction.
Will do that.
CheersMay 9, 2016 at 7:25 am #629046Hi,
Great, please let us know if you should need any more help on the topic.
Best regards,
RikardMay 17, 2016 at 9:18 pm #634000Hi Rikard
Having some trouble adding the custom css.
so as an example i added.testimonial
in an icon box’s custom css field.Then in my enfold child css i added
#top testimonial .avia-button .avia-size-large { border-radius: 22px !important; font-size: 13px; min-width: 139px; padding: 15px 30px 13px; }
as i want the button to have rounded corners.
but there is no effect in the frontend, what am i doing wrong here, just one example of yours would help.
Thank you for your time
-
This reply was modified 8 years, 3 months ago by
waveshaper.
May 18, 2016 at 5:00 am #634144Hi,
There is a missing “.” in the code please add a “.” before testimonial in line
#top testimonial .avia-button .avia-size-large {
Let us know if that fix the issue.
Best regards,
Vinay-
This reply was modified 8 years, 3 months ago by
Vinay.
May 18, 2016 at 9:48 pm #634795Hi Vinay
Thank you for pointing me in the right direction, it worked but then i changed the name to gbutton
I used
#top .gbutton .avia-button .avia-size-large { border-radius: 20px !important; font-size: 13px; min-width: 139px; padding: 15px 30px 13px; }
and placed the name
gbutton
in the custom css field of the button element.but now it does not pick up the custom css at all, what am i missing here ?
Thank you for your patience
-
This reply was modified 8 years, 3 months ago by
waveshaper. Reason: new situation
May 20, 2016 at 3:09 am #635641Hi,
Replace the selector with the following:
#top .gbutton .avia-button.avia-size-large { border-radius: 20px !important; font-size: 13px; min-width: 139px; padding: 15px 30px 13px; }
This article might help: http://kriesi.at/archives/wordpress-developers-your-complete-guide-to-conquering-css-in-2016
Best regards,
IsmaelMay 20, 2016 at 10:03 am #635803Hi Ismael
Legend! it worked, and thank you so much for the helpful link, need to study up on it.
Seems i went wrong here
.avia-button.avia-size-large
had a space.Excellent support, situation solved!
CheersMay 20, 2016 at 12:23 pm #635849Hi,
Glad we could help!
Thank you for using Enfold.
Best regards,
Vinay -
This reply was modified 8 years, 3 months ago by
-
AuthorPosts
- The topic ‘Enlarge all icons to the same size with iconbox’ is closed to new replies.