CSS


STANDARD CSS

CSS that should be applied to all House Digital websites

// remove required (*) from forms
span.required {
display: none;
}

// Freeze maps to prevent scrolling issue especially on desktop
.sqs-block-map {pointer-events: none;}


Use this if the website uses a light background

// Change the color of x in lightbox
.sqs-lightbox-close {
color: #000 !important;
}


OTHER CSS SNIPPETS THAT SOMETIMES CAN BE HELPFUL

.tweak-quote-block-alignment-center .sqs-block-quote {
   font-weight: 500;
   background: #f9f9f9;
   border-left: 10px solid #8E6396;
   margin: 0 10px;
   padding: 0.5em 10px;
   font-style: italic;
   text-align: left;
   font-size: 16px;
}

 

//  Change the footer font size
#footer{
    font-size: 13px !important;
  h2 {
    font-size: 15px;
  }
}

// Add border to footer
#footer {
  border-top: 1px solid hsl(224, 84%, 39%);
}

// Change the color of dividers
.sqs-block-horizontalrule hr {
  background-color: #c9cacc !important;
  height: 1px;
}

// Hide share buttons on products pages
.ProductItem-details-share {
  display: none !important;
}

// remove middle footer block/
#footerBlocksMiddle {
display: none;
}

// remove top footer block/
#footerBlocksTop {
display: none;
}

// Remove hyphens
 p {
   -webkit-hyphens: manual !important;
      -moz-hyphens: manual !important;
       -ms-hyphens: manual !important;
           hyphens: manual !important;
 }


TEMPLATE SPECIFIC CSS

ADIRONDACK

// Remove text align throughout site
body .contact-wrapper, body #contactInfo, body #mobile-navigation, body .outer-wrapper {
  text-align: left !important;
}

// Remove folder nav on project pages
.folder-nav {
display: none;
}

// Change behavior of cursor when hovering over menu icon on desktop
#desktopMenu {
  cursor: default !important; }

FLATIRON

// Remove unnecessary bottom margin on mobile

@media (max-width: 450px) {
section#container {
margin-bottom: 0px !important;
}}

 

// Change font style and size of image captions

.image-caption >p strong {

  font-size: 20px !important;

  line-height: 20px !important;

  font-family: sans-serif; /*note that other fonts can be used by correctly pointing squarespace to the right font family name*/

  font-weight: 200 !important;

}

 

// Change size of text in desktop footer

.footer-block .sqs-block-content >p {

  font-size: 15px !important;

}

 

// Remove bottom border upon hover from "X" in lightbox

.sqs-lightbox-close{

  border-bottom: none !important;

}


CSS SYNTAX

!important – this prioritizes a CSS rule, helping it to over-ride a conflicting rule.