Center countdown on mobile

[nikolaus_k]

hey guys,

could you please help me out with some CSS for my countdown:

I want it be centered (just on mobile) on the the other devices it´s fine already.

Weinabos - Weinabo Korkenfreunde

thx in advance,
Nik

[ruenel]

Hello Nik,

Thanks for writing in! You are having this issue because of the left and right margin and padding of the countdown element. You may need to remove the left and right values of the padding/margin and set it to auto instead. If it is not applicable, you may need to insert a custom inline element CSS in combination with the @media CSS block.

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

To know more information on how you can add a custom inline element CSS, kindly check out this documentation:

• https://theme.co/docs/element-css

Best Regards.

[nikolaus_k]

Thx!

I tried this but for the countdown some reason it doesn´t work. But it works in the chrome dev tools.

@media (max-width: 767px)
{
.e16244-30 .x-countdown-units {
padding: 0em 0% 0em 0em !important;
}}

[ruenel]

Hello Nik,

Your code is using incorrect class selector. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Based on the links that I’ve posted above, you should be using this code instead:

@media (max-width: 767px){
	$el.x-countdown {
		padding: 0 !important;
	}
}

This code must be added in the custom inline element CSS within the Count Down element settings.

Best Regards.