How to correctly insert a CSS media query for desktop display?

[Julian_K]

Hi there!

I have not used a media query yet and am struggling to make it work. I want to apply certain CSS to a specific text of a specific section when its displayed on desktop but not on mobile. Based on my limited knowledge the media query should look like this:

@media screen and (min-width: 768px) {margin-left: 40px}

Question 1: Is this line of code correct?

Question 2: I am not sure where to position it, should it be in the code of the specific section I want to alter or in the theme.scss file? Can I just place it within a div?

Many thanks in advance! Your help would be greatly appreciated!

Kind regards,

Julian

[Jasoliya]

Hi Julian,
Question 1: Is this line of code correct?

@media screen and (min-width: 768px) {
        .your_class{ margin-left: 40px }
}

Question 2: I am not sure where to position it, should it be in the code of the specific section I want to alter or in the theme.scss file? Can I just place it within a div?

>>If you want to apply this all over store then please add in theme.scss file.

Let me know if you can't

[Julian_K]

Hi Jasoliya,

Thanks for your help!

I do not want to apply it all over the store, only for one specific text in one section of the website. I know the relevant div that needs to be styled but I do not know where to place the media query to make it work.

Do I need to place the media query

-> within the div? <div> HERE?</div>

-> as CSS styling the div? <div style="HERE?"></div>

-> somewhere else?

[Julian_K]

Hi Jasoliya,

Thanks for your help!

I do not want to apply it all over the store, only for one specific text in one section of the website. I know the relevant div that needs to be styled but I do not know where to place the media query to make it work.

Do I need to place the media query

-> within the div? <div> HERE?</div>

-> as CSS styling the div? <div style="HERE?"></div>

-> somewhere else?

[Jasoliya]

 No you can place in any css file to work. no need to place in div

let me know if you can't 

[Julian_K]

I wrapped a div around the relevant text with a defined class and added the media query as described above with the defined class to the bottom of my theme.scss file. Unfortunately that doesn't work. 

What am I doing incorrectly?

[Jasoliya]

Add me as staff account (jasoliyabrijesh123@gmail.com) i will do.

And let me know what you want to do.

[Julian_K]

Sorry, I cannot provide you access to the backend. 

Could you maybe copy a copy of the code in here youi are using for CSS media query and name the place where they are positioned?

[Jasoliya]

No worry follow this:

<style>
@media screen and (min-width: 768px) {
     .your_class{ margin-left: 40px !important; }
}
</style>

Add this in theme.liquid at end of file before </body>

Send me store url so i can check if not work

[HaseebAdnan]

https://community.shopify.com/c/shopify-design/media-queries-issue-on-my-css/m-p/1861282
it is solved here