Please help! Can't see my 1 product on mobile view using debut theme

Solved
dawgminded
Explorer
54 0 18

I have been trying to get this resolved and I don't know where to turn. The 1 product I have listed is missing from the product page only on the mobile view. 

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

password: audio

 

 

missingproduct.jpg

0 Likes
PaulNewton
Shopify Partner
2775 155 513

Your storefront is password protected

https://help.shopify.com/en/manual/online-store/themes/password-page 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
dawgminded
Explorer
54 0 18

Yes, the password is in my original post. The password is: audio

 

Thanks!

0 Likes
dawgminded
Explorer
54 0 18

The last code I tried is below for review. Thank you

@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;
}}

.grid__item {
    margin-left: 240px;
}

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

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

/

 

0 Likes
Natztech
Shopify Partner
1891 492 1172

hello @dawgminded 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 728px){
#shopify-section-collection-template .grid{
	
	display: flex;
        flex-wrap: wrap;

}

#shopify-section-collection-template .grid__item{
	
	margin-left: 0px !important;
} 
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
dawgminded
Explorer
54 0 18

Awesome! That worked to bring the product visible. Thank you! Is it possible to have the product centered in the middle of the page. And I will also need help with the 'add to cart' page, as the product is confusing to look at on that page and looks to be off centered and missing part of the product title. I have screenshots below for review. 

missingproduct.jpgaddtocart.jpg

0 Likes
Natztech
Shopify Partner
1891 492 1172

hello @dawgminded 

remove my old code and update with this code

 

#shopify-section-collection-template .grid{
	display: flex;
        flex-wrap: wrap;
        justify-content:center;
}
#shopify-section-collection-template .grid__item{
	margin-left: 0px !important;
} 

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
dawgminded
Explorer
54 0 18

Thank you! That worked perfectly for the product page, however the 'add to cart page' on mobile view looks the same as the screenshot I provided above. 

0 Likes
Natztech
Shopify Partner
1891 492 1172

This is an accepted solution.

hello @dawgminded 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

#shopify-section-product-template .grid.product-single  {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
     width:55%;
    margin:0 auto;
}
#shopify-section-product-template .grid__item{
	    flex: 0 0 100%;
	    margin-left: 0px !important;
}
#shopify-section-product-template .grid.product-single .grid__item .product-single__media-wrapper {
    max-width: 100%  !important;
}
#shopify-section-product-template .grid.product-single .grid__item .product-single__media-wrapper .product-single__media img.feature-row__image  {
    max-width: 100%;
    max-height: 100%;
}
@media screen and (max-width: 728px){
#shopify-section-product-template .grid.product-single  {
    width:100% !important ;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
dawgminded
Explorer
54 0 18

You are amazing! Thank you so much for your quick resolution to my issue!

0 Likes