-
Posts
-
Hello again! Today i have a component challenge..
Im trying to contract the THIS icon-circle and the space around it:
it can be seen in my site at:
https://novo.strokmatic.com/products/visionking/first attempt:
For contracting stuff around the page im using whitespace dividers with negative values (my bosses do prefer a more compact and less spaced visual composition) but this icon-circle is quite resistent to this technique…
—
so my seccond atempt was:1. name it in dev settings tab:
2. tryied to css some rules but none works in the icon-circle:how can i “call” this icon-circle in quick css?
used the name i have set, but didn’t affect it
used the random name avia set for it but doesn’t work either
used both, but it seems to ignore even “!important” rules
—then my third attempt was:
put the stuff in a column, increase to 1/1 size then use column inner padding to “hold” the expansion on the icon-circle
it seems to partially work because it shrinks the icon-circle, BUT i have a LOT of useless empty space i know my boss will ask me to contract.
for some reason the negative whitespace tech isn’t working properly around this column, any tips?less css better
Hey tiago,
Thank you for the inquiry.
Have you tried placing the icon-circle element inside a smaller column, perhaps within the center item in a row of 1/5 columns? You can also use this css code to adjust the width and height of the circle.
.av-icon-circles-container { width: 50%; padding-bottom: 50%; height: 0; margin: 0 auto; }Best regards,
Ismaelnice! the multiple column solution was perfect, it didn’t required the css…
i just set 3 columns and the “natural” 33,3% spliting of screen was enought to hold the icon-circle in a proper position.
using columns i keep the other elements in the section separated enough one from each other.
- The topic ‘Icon Circles extra configs’ is closed to new replies.