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

[dawgminded]

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

[PaulNewton]

Your storefront is password protected

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

[dawgminded]

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

Thanks!

[dawgminded]

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

/

[Kinjaldavra]

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

[dawgminded]

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.

[Kinjaldavra]

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

[dawgminded]

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.

[Kinjaldavra]

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

[dawgminded]

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

[dawgminded]

I do have 1 more question, is it possible to have the product title ‘Travel water bottle for pet’ more centered in relation to the product picture, is it more to the left of the picture as it is now? The price centering is perfect, I would like to leave the price centered as it is. Thank you!