Product information on mobile is not full width

[katieg123]

I'm extremely frustrated and cannot figure out why my product descriptions are not full width on the mobile view. I've attached a screenshot for reference.

54e932-6e.myshopify.com is my website link. Any help is greatly appreciated

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media only screen and (max-width: 749px) {
    .grid--1-col .grid__item {
        max-width: 100% !important;
    }
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Dan-From-Ryviu · Accepted solution]

Hi @katieg123 

Please add this code at bottom of your base.css file to solve it

@media (max-width: 749px){
.product.grid--1-col .grid__item {
    max-width: 100% !important;
}
}

 

[Kyle_liu]

Hi @katieg123 

You can eidt theme code

file name base.css, in line 3586, remove it

.grid--1-col .grid__item {
    max-width: 32%;
}

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media only screen and (max-width: 749px) {
    .grid--1-col .grid__item {
        max-width: 100% !important;
    }
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Dan-From-Ryviu · Accepted solution]

Hi @katieg123 

Please add this code at bottom of your base.css file to solve it

@media (max-width: 749px){
.product.grid--1-col .grid__item {
    max-width: 100% !important;
}
}

 

[Sweans]

Hi @katieg123 ,

You can fix this issue by adding simple line of css

@media only screen and (max-width: 749px) {
.grid--1-col .grid__item {
max-width: 100% !important;
}
.product-form__buttons {
max-width: 57rem !important;
}
}

Add this code to your Base.css

Product-form_ button css is to aligin properly with the content

Online store > themes> click on the three dots of current active theme > Edit code > Search base.css in your left sidebar> open and paste the code in base.css

I hope your issue Will fix by the this.
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[GTLOfficial · Accepted solution]

Hello @katieg123 

Go to online store ---------> themes --------------> actions ------> edit code------->base.css ----line number 908
search this code

@media only screen and (max-width: 749px) {
.grid--1-col .grid__item {
max-width: 32%;
}
}

and replace with this code

@media only screen and (max-width: 749px) {
.grid--1-col .grid__item {
max-width: 100%;
}
}

and the result will be

 

If this was helpful, hit the like button and mark the job as completed.
Thanks

[katieg123]

wow thank you so much, that worked! I do have another question. How do i make these collection images smaller on my mobile view?