Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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

 

Striped line Home.png

Striped Line Shop.png

Striped line footer- too tall.png

Edited by AnaDavisDesign
Link to post
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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

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 i

Posted Images

@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).

Link to post

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. 

Edited by derricksrandomviews
Link to post

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!

Edited by AnaDavisDesign
Link to post

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.

Pockimals-thin-stripe-crop.jpg.9d38309b7fdc0ac234b3a97e0ed00d0f.jpg

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.

1445177075_ScreenShot2021-01-18at11_12_20PM.png.399f851ccaa056021093bd17638d6e19.png

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

278630807_ScreenShot2021-01-18at10_27_05PM.png.53a08b2c88e103571544ce13356ea590.png

Click on Add images or fonts.

787807104_ScreenShot2021-01-18at10_26_20PM.png.fc2b8f8744c3d6d3f9c6e957d9315602.png

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

1162527857_ScreenShot2021-01-20at6_16_27PM.png.78ca170d7fe741b7b1a3daf1b09b1770.png

The CSS should now look something like the following.

1600528180_ScreenShot2021-01-20at6_23_03PM.png.a5811a7d92eb7a2cdd94f1266eed80d2.png

Click on SAVE.

788921360_ScreenShot2021-01-20at6_24_32PM.png.7092095f2b4e950af58b7df947dcb143.png

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.

3234103_ScreenShot2021-01-20at8_35_50PM.thumb.png.55a54192adfe0cc11fa4bbb79da890f5.png

But it's worth a shot eh? 🙂

Let us know how it goes.

 

Edited by creedon
fix some broken images

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...