Adding a coloured box around text on checkout page

[Flat102]

Hi There,

I've added some text that contains a countdown to free shipping on my checkout page, but when I try and add a coloured box around the text the box sits above.  The instructions I followed suggest adding the following code

.shipping-savings-message {
  background-color: #f9ffe6;
  border: 3px solid green;
  padding: 20px;
  text-align: center;
  margin-bottom: 25px;
}

to thestylesheet.css, styles.css, style.css files, but I don't have these (I'm using Debut).  I tried adding to the theme.liquid.scss file, but this is when I get the box above the text...any help/advice at all would be much appreciated.

Thanks

Steph

[suyash1]

@Flat102 - can you please share your site link?

[Flat102]

It's www.flat102.co.uk

[suyash1]

@Flat102 - do you want something like this?

[Flat102]

No just a coloured box around the text the top of the page...so basically the green box in my picture, just down around the text below it...a bit like this purple box.  Hope that makes sense!

[suyash1]

@Flat102 - the issue is that this text do not have any class or id to put css like this, we will need to edit code to put it in some div container, and add class to it to use css

[Flat102]

Is that something you could do?  How much would that cost?

[suyash1]

@Flat102- if you can add me to collab then I can do it, this is relatively very small task, I sent you the DM please check

[suyash1 · Accepted solution]

@Flat102 - I have sent you the request for collab, accept it when possible, I will check and do it at morning, I send you DM too, if you want you can contact me on email.