Why are media queries disrupting my CSS on Turbo theme?

Store Design
1

Hello,

On the Turbo theme I want to change the style of some elements on the phone.

With the little knowledge I have I think using the tag “@media (max-width: 480px)” is a good idea.

However, when I do my tests, then I go to paste the attributes on the css, the css “cuts”. All the style effects don’t load correctly anymore…

I put you a simple example of what I can try to insert on my style sheet and that gives the concern I mentioned above :

@media (max-width: 480px)
.mypersonnalcontent {
         font-size: 16px;
}

For the insertion of other style elements it’s fine, but as soon as I put the “@media” tag everything stops

How to explain this ?

Thank you for your answers!

PS: I am not a developer, I just use my instinct and my resourcefulness

2

Hello @Suprmiles

It’s the GemPages support team and glad to support you today.

The above css code is not syntactically correct. you can update again:

@media (max-width: 480px){
  .mypersonnalcontent {
         font-size: 16px;
  }
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

2 Likes
3

Woooo, I never thought I would get such a quick and efficient response haha!!!

In fact, in my inspector I just make my CSS changes “live” then when I’m satisfied, I copy and paste on the stylesheet, but in fact it was not good ! Unbelievable, but I do it like that with the other elements, only the media element had this problem ! (I’ve been doing this for 3 years)

I notice that you have added “{” unlike my initial code which comes directly from my inspector who had less.

Is this normal?

1 Like
4

yes it is a similar case for me