How can I add left padding to main text box in Whisk theme?

Store Design
,
1

Hi All,

I am using the Whisk Theme and have tried everything (all code edits I could find on this forum) to add left padding to my main messaging text box (see image below). I am not a dev and wondering if either there’s other code overriding my changes, or if I’m just not entering it correctly.

Also, instead of altering the main code, is there a way to do it through the Custom CSS field in the editor?

Screen Shot 2023-05-24 at 2.11.00 PM.png
Screen Shot 2023-05-24 at 2.11.00 PM.png2002×1076 189 KB

2

  1. In the “Assets” folder, locate and click on the file named “theme.scss.liquid” to open it.

  2. Scroll to the bottom of the file and add the following code:

.hero__text-container {
  padding-left: 20px; /* Adjust the value as needed */
}
3

Thank you for replying. I tried it in both my style.css & Theme.liquid files (I don’t have a theme.scss.liquid file.) , and neither worked.

4

Hi @amandabailey ,

Would you mind to share your URL website with password?

Thanks!

5

Yes, thanks for your help.

6

Hi @amandabailey ,

Thank you for the information.

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.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:
  4. And Save.
.animate__step-container.flex.flex--column.space--gap--medium {
    padding-left: 50px;
}

Result:

Rose_Dim_0-1684957300030.png
Rose_Dim_0-1684957300030.png734×494 45.4 KB

You can adjust the padding any size you want.

I hope it help.

7

That worked!!! Thank you :slightly_smiling_face:

8

Welcome. Happy to help. :blush:

9

Hello, thank you for helping me with this, but unfortunately that was not the solution. It ended up working for the title, but then it also pushed all of my centered content over 50px, so I had to remove this line of code. If anyone knows how to add margin on a case-by-case basis for each text box/section that would be great.