0

I'm working with the following code on my squarepace Pacific template via the html code injection (the code creates a white double lined border around the page):

<head>
<style>
body {
  margin:0px;
  background-image: url(http://static1.squarespace.com/static/56df76e4356fb0e00c7e94da/t/5703667a27d4bdaccf43195e/1459840646163/paper_box_texture+CMYK.jpg);
} 
.top, .left, .right, .bottom {
display: block;
position: absolute;
width:100%;
height:180%;
}   
.top  {
border-top: 1em double #fff; top: 40px; z-index:100;
}
.left {
border-left: 1em double #fff; left: 40px; z-index:200;
}
.right {
border-right: 1em double #fff; right: 40px; z-index:300;
}
.bottom {
border-bottom: 1em none #fff; bottom: 200px; z-index:400;
}           
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>

It works on the desktop mode but for mobile it cuts off the copy:

Mobile View

Does anyone know how to enable this border on desktop but remove it for mobile device?

Thanks!

  • Hi Lauren, don't forget to accept an answer if it is satisfactory! This prevents questions showing up in the list of unanswered questions and helps everyone out with a bit of 'rep' :) – Cai Apr 14 '16 at 12:26
  • It's easier for you to use a one of the html CSS Javascript framework Like Bootstrap – hsawires Apr 15 '16 at 19:31
  • Couldn't you just add more padding to the copy? – Aibrean May 12 '16 at 23:07
1

Use CSS to not display these divs below a particular break point. (I use 400px in the example below, but you can set that to whatever you want.)

@media screen and (max-width: 25rem) { /* 400 px */

  .top, .left, .right, .bottom {
    display: none;
  }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.