Hey Guys,
Here’s a question:
Is there a way to adjust the spacing between the icon and the heading on the Classic Feature Box element?
The larger I make the icon, the greater the space between them gets (looks like it’s set to make the space an equal ‘em’ to the size of the icon)
I know the classic elements have less customizability in Pro, and I don’t see any way to adjust it with the UI controls. Is there some CSS that I can use to control that?
Thanks and keep up the good work!
Two more notes on this (probably goes without saying):
I also noticed the top spacing increases with the size of the icon. Need to fix that as well to ‘0’ so it top-aligns with the container.
There is overlap at narrower screen widths - How can I fix that?
Thanks!
Hi @jonathanrockett,
Thank you for writing in, But I can’t replicate the spacing issue on my end, is there a chance that there is an organic white space above and below your custom icon?
There are multiple sites associated on your account, please provide us the site URL so we can take a closer look.
Cheers!
Ideally, in addition to adjusting the top spacing and space between icon and heading, I’d like to vertically center the Feature Box elements in the column…
Thank you.
Hi @jonathanrockett,
The box sizing is based on EM which responds to font size. So to adjust the spacing, you have to change the box size. Example, let’s say reduce it about 50% of its current box size.
.x-feature-box-graphic i {
width: 0.5em;
height: 0.5em;
}
You can add that to Theme Options > CSS. And about vertical alignment, please check this related thread https://theme.co/apex/forum/t/vertical-alignment-with-columns/58303/2
Hope these helps.
Hey Rad,
That worked great! Thanks so much 
Two more things if I could…
At narrower widths (tablet, iPad), the icon stops centering horizontally and right justifies… Hmmmm…
Related to the animation of the feature box (and animations in general actually): I see that I can set the animation delay, but it seems that delay begins on page load… Is it possible to set the animation to begin when the element enters the viewport? The animations on elements below the fold have already completed before the viewer sees them.
Thanks again for the awesome support!
Hello @jonathanrockett,
It seems that you have set the font size of the icon to 300. And because of that, in smaller screens, there isn’t enough space for the bigger icon font. We need to adjust it and set a maximum width. To resolve this issue,
.x-feature-box .x-feature-box-graphic,
.x-feature-box .x-feature-box-graphic-inner,
.x-feature-box .x-feature-box-graphic i{
max-width: 100%;
}
Hope this helps.
Nailed’ it! Thanks again…
Any insight on the animation?
Also, I’d like to change the Classic Type Text element font color to white (#ffffff)… I don’t know the classic type text CSS element ID…
Hello @jonathanrockett,
The animation get triggered upon page loading. To prevent that, the columns must be hidden or not loaded yet so that the animation of the featured box will not be triggered. To do that, please edit your page and in each of the column settings, enable the the Fade In Animation of the columns.
And to change the font color of your Text Type element to white, please click the Text Type element and in the element settings, scroll to the bottom to find the style field and insert color: #fff;
Hope this helps. Kindly let us know.
Thanks RueNel - Super helpful.
Got the type element color changed.
That makes sense about turning on the column fade-in to delay the Feature Box animation until in the viewport… However, when I set the column fade-in to ‘on’ it seems to disable the Feature box animation…
Take a look and see if it’s the same for you: https://sizzlingdigital.com/about
Hey @jonathanrockett,
As of now that’s the only way to manipulate the animations. These are classic elements and there aren’t anymore controls over it. It maybe needs more custom development to manipulate more on the animation. Regretfully custom development is way beyond the scope of our support. This is something we can add to our list of feature requests. This way it can be taken into consideration for future development.
Thank you for your understanding.
No problem. Thanks for that - yes, that would be a good feature improvement. It’s a bit of a bummer to have cool animations on elements that are below the fold, so the visitor doesn’t see them until after they’ve happened… I’m sure you have a long list of development improvements
I have one more question, and I’m sorry to mention a different issue on this thread, but I think it’s related:
As you can see from this thread, we’ve added some custom CSS to address the issues mentioned, but I just noticed a couple of different issues that were previously fixed are now broken again, and I’m wondering if it’s due to conflicting CSS we’ve just added.
Specifically, the issue of column wrapping on tablet screens: https://theme.co/apex/forum/t/row-columns-wonky-in-safari/56701
and the issue of text not centering in columns: https://theme.co/apex/forum/t/text-not-centering-on-tablet/58962
See images… What do you think could be causing this?
Hello @jonathanrockett,
Kindly check your custom CSS. There are orphaned curly braces.
The part of the code should be at like this:
@media (max-width:767px){
.e2-16{
flex-wrap:wrap;
}
.e2-16 .x-column:nth-of-type(1){
min-height:320px;
}
}
.e2-21{
display:flex;
flex-flow:row wrap;
}
@media (max-width:767px){
.e2-21{
flex-wrap:wrap;
}
.e2-21 .x-column:nth-of-type(1){
min-height:320px;
}
}
.x-container:before,.x-container:after{
content:" ";
display:block;
}
@media (min-width:768px) and (max-width:1024px){
.center-text {
display:inline-grid;
}
}
.x-feature-box-graphic i{
width:0.5em;
height:0.5em;
}
.x-feature-box .x-feature-box-graphic,
.x-feature-box .x-feature-box-graphic-inner,
.x-feature-box .x-feature-box-graphic i{
max-width:100%;
}
Please let us know how it goes.
Thank You!!!
All fixed (stupid mistake).
Last issue with the Feature Boxes:
Still getting overlap at narrower widths before the breakpoint. I’ve tried playing with the padding and margins, of both the elements and the columns…
What do you think:
Hi @jonathanrockett,
You can try adding a class to that section.
Then add this in Theme Options > CSS
@media(max-width:1200px) {
.my-section.x-section .x-container.marginless-columns>.x-column[class*="x-"] {
display: block;
width: 100%;
}
}
Hope that helps
Hi @jonathanrockett,
Kindly change the css code to this.
@media(max-width:1200px) {
.my-section.x-section .x-container.marginless-columns>.x-column[class*="x-"] {
display: block;
width: 100%;
}
.my-section.x-section .x-container.marginless-columns {
display:block;
}
}
Thanks
Hmmm… That just made the breakpoint super wide at 1200px… It doesn’t look good to be all in one column at such a wide width…
Additionally, it un-centered the Feature Box Content. Is there instead maybe a way to set a max width for the Feature Box element, so it stays in the container?
Hi @jonathanrockett,
You can adjust the feature box width and the section container using this css
@media(max-width:1200px) {
.my-section .x-feature-box {
max-width: 200px;
}
.my-section .x-container.width {
width: 90%;
}
}
You may change 200px and 90% to adjust.
Hope that helps
Just a success update:
I found a MUCH better solution to this issue than messing with the CSS… The Pro Headline element, with sub headline and graphic icon turned on, is exactly the same as a feature box, but actually behaves properly within the container. I just ‘created’ the same feature box look using the Headline element and it all works as it should… Yay!
Final note on columns and centering issues: I’ve noticed an issue that we had previously fixed is happening again. Specifically, button text on Safari breaking to 2 rows: https://theme.co/apex/forum/t/row-columns-wonky-in-safari/56701/8
It only happens on a safari desktop view. On safari at a narrower tablet view and on safari mobile the button text is correctly on one row (and all other browsers/widths are correct as well)… It’s weird…
