Debut them mobile view

Solved
dawgminded
Explorer
54 0 18

Hello, I am having issues with my logo missing from my mobile view and an issue of having to scroll left and/or right to see images and information on mobile. Is it possible to have it mirror the desktop or have the mobile view compatible for mobile where everything is centered and no scrolling to left or right needed to see the information? Thank you in advance. 

My URL: https://dawgminded.myshopify.com/ 

password: audio

 

screenshot2.jpg

0 Likes

@dawgminded 
Hi, we are glad to help you.

 

@media only screen and (max-width: 749px)
.site-header__mobile-nav {
    display: block;

}

 

Add this code to Theme.scss or theme.css

 I hope it will be helpful for you

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
dawgminded
Explorer
54 0 18
Hello,

Thank you for your response. That didn’t work and I also noticed that the product picture, title, and price is not centered on the product page in mobile. The add to cart page is a blank white page.
0 Likes

This is an accepted solution.

 

@media only screen and (max-width: 749px)
{
.site-header__mobile-nav {
    display: block;
    width: 100%;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
}}

 

Now you can add the code to theme.css
@dawgminded 
i hope it will work.
Thank you

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
dawgminded
Explorer
54 0 18

Thank you! That code worked perfectly for the home page, however I still have to scroll on the Product page to see the product as it should be centered and the 'add to cart' page is blank once you click on the product from the product page. 

product pageproduct pageadd to cart pageadd to cart page

0 Likes

 

 

@media only screen and (max-width: 749px)
{
.grid__item {
    margin-left: 90px;
}
}

 

 

Add in theme.css

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
dawgminded
Explorer
54 0 18

Thank you, I am getting the same result on the product page and the add to cart page is only showing partially, it allows to scroll down but not left or right to see the remaining image and add to cart info, I would like to be able to view it centered and only have to scroll down.

 

add to cart pageadd to cart page

0 Likes

 

@media only screen and (max-width: 749px)
{
.grid__item {
    margin-left: -220px;
}
}

 

Use this make privious as it is.
@dawgminded 

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes
dawgminded
Explorer
54 0 18

Thanks @Zworthkey So I should leave the previous code in and add this one? If this is the case, the product is no longer visible on the product page as it is a blank white page and allows for scrolling up and down. I am unable to give feedback on the add to cart page because the product is not available to add. 

0 Likes

 

.grid__item {
    margin-left: 420px;
}
@media only screen and (max-width: 749px)
{
.grid__item {
    margin-left: -220px;
}
}

 

add this in theme.css

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
0 Likes