Media query changes not appearing on mobile

Store Design
1

Hello, community users of Shopify,

been having a great time and getting lots of help from just reading through all the posts made here, being able to understand more and more about my website’s code.

I have recently been posed with the design task to center all text in the footer but only on mobile screens! I understood correctly that I do this using the media queries. We are currently using the “Dawn Theme” and I simply added the centre align code line to this part of the section-footer.css file. (Marked in bold italic below)

@media screen and (max-width: 749px) {
.footer .grid {
text-align: center;
display: block;
margin-left: 0;
}

Now this works great when I resize my browser window on desktop and everything appears fine, but when I preview the theme on my actual mobile device nothing has changed!

I hope someone has had a similar issue or can help me fix this?

2

Hi @ElReem

Can you once try below CSS

text-align: center !important;
1 Like
3

Hi @Sheesh_b ! Thanks so much for your reply, I really appreciate it.

I tried this but nothing changed. My point here is that when I preview my page in mobile view of the theme customization it works, but when I go to preview the theme on my actual phone. Nothing changes, this is frustrating :confused:

Is my explanation understandable?

4

Hi @ElReem

Yes, I got it.

Can you share your website link to check further?

5

wearespacehero.com

do you want me to share a preview of the beta testing site where I am trying to make these changes?