I’ve noticed that the module ignores the alignment specified in “icon settings” on screens < 768px and forces all icons to center alignment.
In another thread I found the css below suggested: @media (max-width: 767px) {
.fl-module.fl-module-icon {
text-align: left !important;
}
}
But this doesn’t fix the problem. This code doesn’t say “use the icon settings specified by user”. Rather it says, “continue ignoring what the user wants and force all icons left on small screens.”
Which creates the same problems for icons that are supposed to be centered (I want some icons centered and some left aligned).
How do I fix this so that the icon settings I specify are followed regardless of screen size? What CSS can I use to say “use the icon settings specified by user”?
P.s. Why over-ride the user’s wishes on small screens? If the user wants the small screen to appear different that’s easily accomplished by creating two versions of the row in question and choosing which version to show on which screen via the Responsive Layout > Display settings.
This has already been fixed on our end and will be available on the next maintenance patch. Basically, we’ve added a new option to set the alignment on mobile.
The Icon module is set to center align on mobile. I believe the user wanted the icons to left align on mobile, hence the code above was given. What you’re trying to do should be possible once the new update hits.
Ben, I got the update and see this option now. I checked it out and was able to change the alignment of a couple of icons with the custom alignment. Good feature.
General Critique:
The “mobile structure” default is still “center.” I was hoping the update would set the default to “what user specified for regular structure” and if user wants to change mobile to something different then they have those options via custom alignment. Having the default value something different than what the user specified makes no sense to me.
Question:
I’ve got a lot of product pages each with a number of icons. I could change each manually. But that would be pretty slow. So I’m wondering if there’s a way to change the default from “center” to “follow regular structure.” Please let me know if this is possible. Thanks!
The reason why we left the mobile default alignment to center is for backward compatibility. A lot of sites might be using it like that and changing the way it works now would break their layouts.
