Can I edit the mobile version of my site without affecting the desktop version?

Solved
laserbeampq
Excursionist
18 0 7

Keeping my current theme (Venture), is it possible to edit the mobile version without it affecting the desktop version? Basically, 2 different looks for 2 different platforms, using the same theme.

Accepted Solution (1)

Accepted Solutions
Bluish
Shopify Partner
651 92 115

This is an accepted solution.

Hi @laserbeampq 

Yes, wrap everything you want for a specific size in a @ media query

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

So, as per w3 example, I added a bit more to it. For the html body, everything up to resize of screen of 600px, make the body background blue. Else everything about 601 px make it white. This works as you resize the browser, it doesn't stop on page load.

For screen sake. Up to 479px is generally mobile, up to 767px is Tablets and everything about is laptop+

 

 

body {
background-color: white;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

View solution in original post

Reply 1 (1)
Bluish
Shopify Partner
651 92 115

This is an accepted solution.

Hi @laserbeampq 

Yes, wrap everything you want for a specific size in a @ media query

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

So, as per w3 example, I added a bit more to it. For the html body, everything up to resize of screen of 600px, make the body background blue. Else everything about 601 px make it white. This works as you resize the browser, it doesn't stop on page load.

For screen sake. Up to 479px is generally mobile, up to 767px is Tablets and everything about is laptop+

 

 

body {
background-color: white;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

View solution in original post