How can I optimize my online store for both mobile and wide screen?

[Ana001]

Hi everyone, I am working on my online store and unable to adjust the layout of mobile and wide screen. I f i try fix mobile view, wide screen gets disrupted. Can anyone please help me with this?

[suyash1]

@Ana001 - using media queries adjustments for both views can be done, can you please share the page link from where you have taken above screenshot?

[Transcy]

Hello @Ana001 ,

Here’s general guide for you:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css fike

Add this following code at the bottom of page

@media screen and (max-width: 767px) {
  body {
    height: 100vh;
    width: 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  body {
    height: 100vh;
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  body {
    height: 100vh;
    width: 1200px;
    margin: 0 auto;
  }
}

Save and preview

Hope this can help.

Transcy

[Ana001]

Hi Transcy, thank you for your help. It worked out for the wide screen view, but the mobile view is still. Please see the screen shots

[Ana001]

Hi Suyash, thank you for your reply. https://heyday00.myshopify.com/ this is the link of the store. I am able to solve the wide screen view by the help of a fellow here, but the mobile view is same like before.