Hello!
Previously I had all of my site margins at 100%, however I now would like to change to 95% because there is not enough space. I must have changed it in a code somewhere earlier on but I cant find where. I have changed everything except for the image with text on home page doesn’t seem to be changing to 95%, it is still 100%.
URL: https://www.samiyaskincare.com.au/
Password: ellacoker
You can add this CSS inside your base.css file.
go to the online store → Action button(three dots) → Edit Code
Fine the base.css and you can add this css just end of the file.
.full-width .image-with-text__grid {
max-width: 95%;
margin: 0 auto;
}
After adding this css the result will be like this.
I hope that works. If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
You can replace that CSS with this new to make the image edge to edge.
.full-width .image-with-text__grid {
max-width: 98.5%;
margin: 0 auto;
margin-left: 0;
}
.full-width .image-with-text__grid.image-with-text__grid--reverse {
margin-right: 0;
margin-left: auto;
}
@media(max-width:752x){
.full-width .image-with-text__grid{
max-width: 95%;
margin: 0 auto !important;
}
}
Here is the result after update the CSS.
If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Hi @ellacoker
It has the option to change the layout of a section is Full width or Grid from Online Store > Themes > Customize
Hi @ellacoker
You can follow this instruction:
Go to Shopify > Theme > Customize
Copy and paste this code on Theme settings > Custom CSS section
full-width .image-with-text__grid {
max-width: 97.5% !important;
margin: 0 auto;
margin-right: 0 !important;
}
Result:
