We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Countdown Timer Not Horizontal On Mobile View (horizontal)

Featured Lock Resolved Bug
Hi!
Hello. The problem was discussed and partially solved here.
But on some devices, the counter is still not displayed in one line.
https://snipboard.io/3tyJRj.jpg https://snipboard.io/5AhBLg.jpg
And in a horizontal position, on all devices it is still displayed in 2 lines.
https://snipboard.io/viyW5I.jpg https://snipboard.io/ld10jL.jpg

Please modify the addon code, because often there is enough space on the screens to display it "in a row", but for some reason the counter rearranges the fields vertically...

Regards!

4 Answers

Sifat - Staff

More than a month ago #Permalink
Dear Sifat.
In my case, I solved the problem by changing the "max-width" in your code.
But users just want to have a countdown counter that will be displayed in a row if there is enough space for this.

@media only screen and (max-width: 736px) {
.sppb-countdown-timer {
display: flex;
justify-content: center;
}
.sppb-countdown-timer div {
display: flex;
flex-direction: column;
max-width: 56px;
align-items: center;
}
#sppb-addon-(insert ID of your addon) .sppb-countdown-text {
width: 60px !important;
}
}


Glad to know that you've used this code to solve this issue. Hope this'll help others too.

-Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Would you please share the exact page url here? That would help to solve your issue easily.

-Best Regards

kupala

More than a month ago #Permalink
Dear Sifat.
In my case, I solved the problem by changing the "max-width" in your code.
But users just want to have a countdown counter that will be displayed in a row if there is enough space for this.

@media only screen and (max-width: 736px) {
.sppb-countdown-timer {
display: flex;
justify-content: center;
}
.sppb-countdown-timer div {
display: flex;
flex-direction: column;
max-width: 56px;
align-items: center;
}
#sppb-addon-(insert ID of your addon) .sppb-countdown-text {
width: 60px !important;
}
}


There are no replies made for this post yet.
Be one of the first to reply to this post!

124

Templates

331181

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us