-
AuthorPosts
-
January 30, 2022 at 12:15 am #1337869
On my site – http://balrajt8.sg-host.com/ – I have a section below the slider area with 3 sets of animated numbers. On desktop they look great but on mobile, I would like the numbers and text NOT to stack, instead they should sit side by side
Screenshot of how it should look – https://ibb.co/hRzc7FP
I went ahead and added this code below
@media only screen and (max-width: 769px) {
.avia-animated-number {
display: flex;
}
}But it is not quite correct as the numbers and the text are too close to each other and not aligning properly.
January 30, 2022 at 7:16 am #1337895Hi navindesigns,
Thanks for giving us a screenshot and admin access.
I have added an ID attribute “stats” on your codeblock, then replace your CSS (code above) with:@media only screen and (max-width: 767px) { #stats .av_one_third { border-top: 2px solid #000; margin: 0 !important; padding: 10px 0; width: 100%; } #stats .av_one_third.first { border: none; } .avia-animated-number { display: flex; align-items: center; text-align: left; } .avia-animated-number .heading.avia-animated-number-title { width: 150px; } }Please review your site.
Best regards,
NikkoJanuary 31, 2022 at 6:10 am #1337982This looks GREAT
I tried to add the divider lines on mobile but they are not in the center and they are uneven. is there a way to fix that?
screenshot – https://ibb.co/N3LmM9h
site – http://balrajt8.sg-host.com/
February 1, 2022 at 2:04 pm #1338231Hi,
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
#stats div .av_one_third { margin-left: 0; width: 33.333%; }Best regards,
YigitFebruary 2, 2022 at 6:02 am #1338372Looks great
Thanks as always
February 2, 2022 at 1:06 pm #1338455 -
AuthorPosts
- You must be logged in to reply to this topic.
