Remove padding and decrease size of image : Essentials theme by Inspired Themes

Store Design
, ,

Topic summary

Goal: On the Essentials theme (Shopify), remove extra padding above an image on mobile and make the image slightly smaller.

Key actions taken:

  • Store URL and password were shared for review (crababblecrafts.com, abble).
  • Helper advised adding mobile-only CSS (max-width: 749px) in base.css/theme.css to: hide the banner box, cap grid item width (~90%), and center the Image-with-Text grid.

Outcome and follow-ups:

  • Initial CSS worked for the first section, but caused another “Image with text” block lower on the page to be off-center.
  • A second CSS snippet was provided to center that additional grid on mobile as well.

Latest update:

  • The user changed other CSS, reporting it “reversed” the fix and now the padding is gone (unclear if padding returned or was removed unintentionally). They asked for a corrective fix.

Notes:

  • Images attached are important to understand the spacing/alignment issues.
  • Technical elements: mobile @media query (≤749px), grid alignment (justify-content), and width constraints (max-width).

Status: Partially resolved; a regression occurred after further edits. Awaiting guidance to restore intended mobile spacing and alignment without side effects.

Summarized with AI on January 19. AI used: gpt-5.
1

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!

Screen Shot 2023-09-06 at 10.31.31 AM.png
Screen Shot 2023-09-06 at 10.31.31 AM.png1030Ă—1468 248 KB

1 Like
2

Hi @KJD_1

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

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

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

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

Screen Shot 2023-09-06 at 11.16.32 AM.png
Screen Shot 2023-09-06 at 11.16.32 AM.png908Ă—1206 159 KB

1 Like
5

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!

6

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?