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

Julian_K
Tourist
9 0 2

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

Replies 9 (9)

Jasoliya
Shopify Expert
4817 623 1219

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Julian_K
Tourist
9 0 2

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
Tourist
9 0 2

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
Shopify Expert
4817 623 1219

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

let me know if you can't 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Julian_K
Tourist
9 0 2

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
Shopify Expert
4817 623 1219

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

And let me know what you want to do.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Julian_K
Tourist
9 0 2

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
Shopify Expert
4817 623 1219

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
HaseebAdnan
Shopify Partner
11 0 2