-
AuthorPosts
-
March 18, 2019 at 9:58 pm #1080084
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
March 21, 2019 at 6:55 am #1081187Hey Oliver,
I tried logging into your site but the details are not working, could you check and verify please?
Best regards,
RikardMarch 22, 2019 at 9:37 am #1081773Rikard, these details are correct
March 27, 2019 at 2:29 am #1083343Hi,
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,
IsmaelMarch 27, 2019 at 2:59 pm #1083648Hello 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 :)
March 29, 2019 at 12:45 am #1084345Hi,
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,
IsmaelApril 2, 2019 at 1:03 pm #1086060Thank you Ismael,
I’ve learn a lot from that article!
Ollie :)
April 2, 2019 at 7:00 pm #1086202Hi oliverrees,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.
