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):

body {
  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;
.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;
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>

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?


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

1 Answer 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 and acknowledge you have read our privacy policy.

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