Hello,
Does anyone know the code to remove the padding above the image on mobile only (Attached), as well as make the image slightly smaller?
Thank you!
Hi @KJD_1
Would you mind to share your Store URL website? with password if its protected. Thanks!
Thank you for the information. Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width:749px){
.banner__box.color-background-1 {
display: none;
}
.grid--1-col .grid__item {
max-width: 90%;
}
.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet.image-with-text__grid--reverse.gradient.color-background-1 {
justify-content: center;
}
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi,
Thank you so much - that worked, but now the image lower on the page that is also an “image with text” is off centred (picture attached). Any solution for that?
URL: crababblecrafts.com
password: abble
Yeah sure we have solution on that.
Check this.
Same Instruction.
@media only screen and (max-width: 749px){
.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet.gradient.color-background-1 {
justify-content: center;
}
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
I am so sorry, I seem to have changed something else in the css that reversed this and now the padding is gone. do you know a fix for this?