'Media Query for text-align: center

I'm having some issues with a media query. I'm trying to center text for mobile devices only. I've added the following to my CSS, but it doesn't seem to be doing the trick. Any help would be much appreciated. Thanks!

@media only screen and (max-width:500px){.category-compare {text-align:center;}}

csstextalignmentmedia-queriescenter


Solution 1:[1]

Make sure your nesting is correct. Media queries are very pedantic.

Check your code for previous text-align rules on .category-compare and check how it is nested, i.e.: .main-content .left-side .category-compare. If it is nested like that, you will need to do the same nesting for your media query.

Solution 2:[2]

Please replace text-align:center; to text-align:center !important;. This is forcefully text-align property.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mark Eriksson
Solution 2 Avanish Kumar

Related Questions