Solved

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

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

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

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

 

View solution in original post

Replies 10 (10)

PaulNewton
Shopify Partner
6274 572 1315

Your storefront is password protected

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

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


dawgminded
Explorer
54 0 18

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

 

Thanks!

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

/

 

Kinjaldavra
Shopify Partner
2302 570 1422

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

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. 

Kinjaldavra
Shopify Partner
2302 570 1422

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

 

dawgminded
Explorer
54 0 18

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

dawgminded
Explorer
54 0 18

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!

 

addtocart.jpg

Kinjaldavra
Shopify Partner
2302 570 1422

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