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!

Improve this question
4
  • answers.squarespace.com/questions/18706/…
    – Joonas
    Apr 13, 2016 at 5:50
  • 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, 2016 at 12:26
  • It's easier for you to use a one of the html CSS Javascript framework Like Bootstrap
    – hsawires
    Apr 15, 2016 at 19:31
  • Couldn't you just add more padding to the copy?
    – Aibrean
    May 12, 2016 at 23:07

1 Answer 1

Reset to default
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;
  }

}
Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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