-
Posts
-
Hello!
I am having issues with icon alignment on mobile. I really like how the icons appear horizontally on browsers, but they align completely vertical and centered on mobile. I’d like to make it so they appear in rows.
In my example images, I have 5 icons in a row at 40px on mobile. I am also using the following CSS to make them smaller on mobile:
@media only screen and (max-width: 767px) { .av-icon-char { font-size: 20px !important; padding: 10px !important; }}-I’d like the icons to scale with the dimension of the phone and stay on the same line.
-If you think that it may cause issues, I’d like to have the icons get pushed down to a second horizontal row and center them base don how many are there.
-Lastly, do you have any better recommendations for handling the scale of icons from larger to smaller screens? My solution works, but isn’t exactly ideal as it’s done in pixels and doesn’t adjust per tablet -> mobileI believe the first solution would be the most ideal. Thank you for all your help!
Hey!
Add this to your custom CSS.
@media only screen and (max-width: 767px) { #plastic-surgery-social-media .av_one_fifth { width: 20% !important; } }Best regards,
ElliottThank you for this Elliot!
I do have a question regarding this approach. I see you added: #plastic-surgery-social-media to the CSS. Doesn’t that mean it will only affect that one area? What if I have icons in a similar fashion elsewhere on the site? Won’t the same issue occur?
Hey!
You should place those icons into Color Sections with custom ID as well in order to avoid applying the changes on all 1/5 column elements.
Best regards,
YigitSo, would it be better to switch my original CSS to the below? I want this to work for all icons, as a change like that is the most desirable:
@media only screen and (max-width: 767px) { .av-icon-char { width: 20% !important; }}Or is it best to keep both individual CSS codes in place?
I just tested your code with mine and it provided the same result. You can see the icons are overly large and stacked vertically on mobile instead of horizontally:
I understand what you recommended better now as we are trying to make the width 20% on all mobile columns with the #plastic-surgery-social-media class. For some reason, when adding what you sent, it is not working properly.
Hey!
I don’t see the code I told you to add in your source code. Where did you add it?
Deactivate your caching plugins and clear your browser cache after adding it in Dashboard > Enfold > General Settings > Quick CSS.
If it’s still not working then paste the full contents of your Quick CSS field here so we can check for typos.
Regards,
ElliottFeel free to close this ticket. I have worked on CSS issues regarding this theme for over a year and still have 50% of my issues unresolved. I will not be using this theme again ever. It’s not responsive, and the most basic user experience issues go unresolved or half fixed.
Thank you for your help.
Hey!
That is not normal. We and thousands of Enfold users are not having responsiveness issues. If you do not mind providing login credentials, we would gladly look into the issue.
Regards,
YigitI had the same problem. 3 icons horizontal on a pc appeared vertically on a mobile. I do not understand why they are displayed vertically on a mobile, thats not responsive i guess. But i solved it with Yigit’s solution.
@media only screen and (max-width: 767px) {
.av_one_third {
width: 32% !important;
}
Thanks again!Hey!
@mozhead Thanks for the update! We will keep the thread open for the OP, if you have any other questions or issues, please feel free to start a new thread :)Best regards,
Yigit
- You must be logged in to reply to this topic.