Why are media queries disrupting my CSS on Turbo theme?

Solved

Why are media queries disrupting my CSS on Turbo theme?

Suprmiles
Tourist
10 1 5

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

Accepted Solution (1)

GemPages
Shopify Partner
5621 1261 1230

This is an accepted solution.

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 3 (3)

GemPages
Shopify Partner
5621 1261 1230

This is an accepted solution.

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Suprmiles
Tourist
10 1 5

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?

HaseebAdnan
Shopify Partner
11 0 2

yes it is a similar case for me

 

Haseeb