Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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 ;
}
}
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
Yes, the password is in my original post. The password is: audio
Thanks!
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;
}
}
/
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;
}
}
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.
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.
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 ;
}
}
You are amazing! Thank you so much for your quick resolution to my issue!
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!
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;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024