Can I add a thin border across the width of a site?

Site URL: https://pockimals.com

Is there a way to add a thin border across the width of a site? I'd like to use a piece of striped art under the menu bar of each page on my site, but I cannot figure out how to keep it a static height and still have it stretch the full width of the site. When I add the art into its own section, I either get too much white, or the stripe is too tall. When I've tried to use code to shorten the section to the height I want, the whole section disappears. 

The site is public now.

I would also like to control how tall it is on mobile, so it doesn't get too tiny.

TYIA!

@creedon

Please add your site-wide password so other folks can take a look at your issue if they want.

You can, it will take code to do it, quite a bit of it,  and here is how you make it:

https://www.ostraining.com/blog/coding/multi-colored-css-borders/

@derricksrandomviews Interesting. This solution is a bit different than what I had been thinking...

I have a piece of artwork (the striped border) that I'd like to have it stretch across the entire website and maintain its relative height. Ideally, I'd like to create a smaller piece of this same artwork for mobile that does the same. Does that make sense? 

In the first image I posted, the height is correct, but the art doesn't stretch across the whole site. In the second example, the artwork does stretch across the whole site, but I can't control how tall it is (too much of the stripe is overwhelming to look at).

That was another thought, to use an image as opposed to code to create the stripe. The image idea can work but it would need to be targeted to your site blocks that is why the site password is neeed. Coders do a Chrome inspection, break out the block code and  id and then write additional code to do what you want. So you need to put the images where you want them, provide the password and I am certain some good coders here will fix it with code that will allow easy adjustment of the image height and width. 

The site is public now.

Yes, I was trying to do exactly what you describe, but I am just not skilled enough to get it quite right. 🙂 I was able to adjust the height on sections, but it was causing the stripe to disappear completely when I put in the height I thought I wanted.

Thank you!

Open the following image in a new tab/window and save the image to your computer. It is a cropped version of your thin stripe image.

Add the following to Design > Custom CSS.

body:not( .sqs-jacquard ) .header:after  {

  background-image: url('[enter image url here]');
  background-repeat: repeat-x;
  content: '';
  display: block;
  height: 15px;
  
  }

Select the "[enter image url here]" text in the Custom CSS field and hit backspace or delete key.

Scroll down until you see MANAGE CUSTOM FILES button and click it.

Click on Add images or fonts.

Navigate your OS's file selection interface and select the file you downloaded earlier and then click on the newly added file.

The CSS should now look something like the following.

Click on SAVE.

Go into Full Preview and reload your site. Or try viewing in an incognito window.

Hopefully you should now have a thin stripe across the width of your site header. If not try increasing the vertical spacing for the header a bit. Then try viewing again. This effect won't show up in Preview.

I'm not 100% sure this will work as I had some odd issues along the way developing it.

But it's worth a shot eh? 🙂

Let us know how it goes.

Try adding this code to Custom CSS

.page-section:nth-child(2){
    min-height: 0 !important;
}

Change number 2 to the section you want to thin out. I uploaded an image to an image section and it worked for me.

@creddon I JUST saw this. Thank you so much. I am going to give it a try this weekend!

@AnaDavisDesign

I fixed a couple of broken image links in the instructions so you should be good to go for the weekend! 😀

Thank you! I noticed the links broke and was hoping I'd be able to cope without them. This will make it easier. 🙂

@AnaDavisDesign

Thank goodness I hadn't emptied the Trash so I was able to rummage around and re-upload those images! 😀