Dear Enfold technical team,
I have put two icon lists on my home page, with short dialogues for each. When the page is full screen the first, second and third icon on the left column, is horizontally in line with the corresponding icon in the list to the right column.
If however, I reduce the size of the screen, because of differences in text volume, the icons move lower than their associated icon on the other side.
Is there a way I can make it uniformly increase the size taken up of both the left and right hand columns, so that if one jumps to a second line because, the other one does too (even if there is no extra text).
Thank you, Kind regards, Oliver
Hey Oliver,
I tried logging into your site but the details are not working, could you check and verify please?
Best regards,
Rikard
Rikard, these details are correct
Hi,
Thanks for the update. Try setting a minimum height to the icon list container.
.avia-icon-list article.article-icon-entry {
min-height: 200px;
}
Use css media queries to adjust the minimum height value on different screen sizes.
Best regards,
Ismael
Hello Ismael,
Thank you for that, what do you mean when you refer to using CSS media queries?
Can I say set it so that for mobile screens the min-height is 200px, on tablets it is 175px and on computers it is 150px?
Thank you for your continued help,
Ollie :)
Hi,
Yes, that’s what I meant. More info about that can be found in the following documentation.
// https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Best regards,
Ismael
Thank you Ismael,
I’ve learn a lot from that article!
Ollie :)
Hi oliverrees,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria