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

Store Design
1

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

1 Like
2

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

3

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?

HERE?

→ as CSS styling the div?

→ somewhere else?

4

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?

HERE?

→ as CSS styling the div?

→ somewhere else?

5

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

let me know if you can’t

6

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?

7

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

And let me know what you want to do.

8

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?

9

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

Send me store url so i can check if not work

10

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