Tagged: enfold
-
AuthorPosts
-
February 14, 2021 at 4:38 pm #1280423
Hy!
I need some help on my MOBILE Version of my Website. On Desktop, all looks great. But on my mobile device (iphone XS) the startsite looks terrible. I have fixed the size of the 4 boxes with the symbol. it should be smaller on mobile and when i click on it – i dont want this hover effect, that the symbol and Font goes down. How can i disable that effect only on mobile?
After that there is a picture of me and than is a lot of empty grey space after it until the blog with the header “aktuelles” shows up. How can i remove this empty space, only on mobile?
- This topic was modified 3 years, 10 months ago by p412421e1.
February 16, 2021 at 5:06 pm #1281425This reply has been marked as private.February 17, 2021 at 2:43 pm #1281749Hi,
Sorry for the delay. We could use the following css code to adjust the size of the icon grid columns and decrease the font size of the icon and the title.
@media only screen and (max-width: 767px) { .avia-icongrid-numrow-3 li, .avia-icongrid-numrow-4 li, .avia-icongrid-numrow-5 li { width: 50%; } .avia-icongrid-icon { font-size: 18px; line-height: 1; margin-bottom: 0.5em; color: initial; } .av_icongrid_title.icongrid_title { font-size: 13px; text-align: center; } }
Here is how it should look after adding the css code above.
Screenshot: https://imgur.com/80Sr1eQ
And for the revolution slider or the image, try to insert the css code inside the css media query that we have just created above to decrease the height of the wrapper.
#rev_slider_26_3_wrapper { height: 200px !important; }
Best regards,
IsmaelFebruary 17, 2021 at 9:59 pm #1281878This reply has been marked as private.February 19, 2021 at 1:51 pm #1282217Hi,
Thank you for the update.
Try to add this css code to create more space for the icon and the title.
.avia-icongrid-tooltip li .avia-icongrid-front { padding: 0; }
Make sure to include it inside the css media query that we created above. And to increase the size of the icon, try to adjust this css code.
.avia-icongrid-icon { font-size: 18px; line-height: 1; margin-bottom: 0.5em; color: initial; }
Increase the font-size from 18px to 30px or to any value that you prefer.
Best regards,
IsmaelFebruary 22, 2021 at 11:41 am #1282760This reply has been marked as private.February 23, 2021 at 1:20 pm #1283069 -
AuthorPosts
- The topic ‘Need some mobile CSS help in my Enfold Startsite’ is closed to new replies.