-
Posts
-
I have ten icons that I want to place in two rows. What is the best way to do this?
I have placed each icon in a 1/5 layout module. I’m not sure this is the best way. On mobile device I only get one very long column of each icon. Suggestions are preciated.
Finally I wonder why I don’t get the hover effect on the icons? I have set them as standalone with border, but is there any options for the hover effect?
Thanks!
Hey Effektid!
There isn’t any customization option for the border effect at the moment no.
In general though using the 1/5 column is how I would do it and actually have done it that way on the documentation site: http://kriesi.at/documentation/enfold/
Cheers!
DevinThanks for the answers so far! I just wondering if there are any possibilities to chnage how the icons are displayed on a mobile phone? When I’m using 1/5 I just get a column of all icons! Would it be possible to change som CSS to get at least two icons in a row instead of one, when the page is displayed on a mobile phone?
Yes, you would need to give that section an ID or custom class name and then target the containers within just for mobile. For the docs home page for example I would use:
/* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { #home-icons .flex_column.av_one_fifth { width: 50% !important; } }I added the code belowv to the quick css, but it’s not working perfect. I get two columns, but not an equal amount of icons, despite that I have a total of 10 icons. It’s not 5 in each column, it’s six in the left column and then in the right column I get 2 icons and then an empty gap and then 2 icons again!
What could be the reason for this? I have tested to add float: left and display: inlie-block, but nothing works! Any ideas? Would be nice if it works! Thanks in advance!
@media only screen and (max-width: 767px) {
#tjanster .flex_column.av_one_fifth {
width: 50% !important;
}
}
- You must be logged in to reply to this topic.