-
Posts
-
I’ve been having a hard time decreasing the padding inside of the icon grid items. You can see with the borders around the text/icons in the screenshot linked below that I need less padding on the right and left so the “Operating Temperature Range” text can fit on two lines like all the others. If someone could confirm how to adjust that, it would be great. Ideally, I would like to adjust the top and bottom padding as well. Also, the icons are not the icons from the theme. I added a custom class with a background image so I could use different icons. So the actual .avia-icongrid-icon class is set to “display: none;”.
Thanks!
Hey NicomIT,
Can you give us the link to the specific page? so we can try to inspect it and provide some CSS code that could help.
Best regards,
NikkoSure thing Nikko. See below in the private content.
There is an image directly below the icon grid that can be used as a reference for what I’m trying to do. I also noticed there seems to be a slight shift in the text on a couple of the containers when you mouse on/off of them.
Thanks!
Hi NicomIT,
I’m not really sure if I’m correct with what you’re trying to achieve, but please try this CSS code and it should reduce the padding on the left and right:
.product-spec-grid h3 { display: inline-block; padding-left: 5px; padding-right: 5px; }Best regards,
NikkoThanks Nikko. I think that I may not have explained things clearly. It’s the padding of the great boxes themselves that I want to decrease the padding on (the area outside the pink borders). I want the the area within the pink borders to be wider and extend closer to the outside of the grey box. That way I can get all the text on a single line (‘Operating Temperature Range’ is on two lines now and I would like it to be on one). This will help the icons line up better as well. Hopefully that made sense.
Hi NicomIT,
I see, thanks for the clarification, please try this CSS code instead:
#top .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner { padding-left: 20px; padding-right: 20px; }Best regards,
NikkoThat worked great. Thanks Nikko, I still see a slight shift in the text on the backside of a couple of the boxes when you mouse over them. See the “Dimensions” container for an example.
Thanks again for the help adjusting the padding.
Hi NicomIT,
You’re welcome, however I could not seem to see the slight shift you mentioned in the backside, even after checking Dimensions and using a web inspector.
The code I gave only affects the front part, can you give us a screenshot again on your end showing this issue?Best regards,
NikkoHi Nikko,
It looks like it’s happening in Firefox and Edge. Chrome seems to be fine. Unfortunately, I can’t send a screenshot since you need to actually see the text move slightly when the container flips.Ryan
Hi Ryan,
I have checked it in Microsoft Edge and could see some movement where the text is a bit blurred for a moment then it becomes clear and causing that slight movement, this seems to be a browser glitch and we are using standard CSS to do that flip behavior, unfortunately, we can’t resolve this type of issue :(
On firefox (version 77.0.1 (64-bit)), I don’t see any text movement at all.
Best regards,
NikkoThanks for checking that again Nikko. It would have been great if we could fix it, but it’s st least subtle and not in every browser.
I did notice something with the area where your mouse goes over the containers and when they flip. If you move your mouse a little under the bottom row, or just above the top row, the containers flip. Is there something in the CSS that can be done to make sure the containers only flip when you mouse over just the width and height of the actual containers? Thanks!
Hi Ryan,
Can you try adding this CSS code in Quick CSS:
#top .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner, #top .avia-icongrid-flipbox li .avia-icongrid-flipback .avia-icongrid-inner { padding: 0; }Best regards,
Nikko
- The topic ‘Decrease Padding In Icon Grid Items’ is closed to new replies.