Center Language dropdown field over mobile

COwebmaster
COwebmaster used Ask the Experts™
on
I need to center the language dropdown field in the footer over mobile on this site https://ccdenver.org/ but it's not working. Any ideas?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Adrian ThompsonConsultant for Website Development and Online Marketing

Commented:
Fort the language dropdown, your code currently reads:

<div class="fl-html">
	<div id="language-dropdown">
...

Open in new window


Change it to this:
<div class="fl-html" style="padding-left:10px; width:170px; margin:auto;">
	<div id="language-dropdown">
...

Open in new window


I tested on mobile (Chrome) and it works perfectly
Consultant for Website Development and Online Marketing
Commented:
My previous comment is a solution using "inline style" and it works perfectly. However, it has the disadvantage that it will affect the display of your desktop version, which you don't want to do. Therefore if we use a Media Query in your CSS we can make it stay unaffected on desktop and centre align perfectly on mobile.

Therefore the solution you should use is adding this to your CSS file:

@media only screen and (min-width: 600px) {
       #language-dropdown{
                padding-left:10px; 
                width:170px; 
                margin:auto;
        }
}

Open in new window

Hi,

You can use Bootstrap helper class
<div class="center-block">...</div>

Open in new window

https://getbootstrap.com/docs/3.3/css/#helper-classes-center

Author

Commented:
Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial