Jump to content

7.1 blog - masonry margin, padding display problem

Recommended Posts

Site URL: https://tambourine-orca-xhby.squarespace.com/news

I am attempting to style my 7.1 blog summary using a masonry grid and inspired by the old Tudor template.

While I've successfully laid out the elements pretty closely (and even accounted for the mobile nuances, the unfortunate side effect is that all the content blocks are overlapping each other when the page is loaded ...



However, if i make any change to my browser window size, it will re-shuffle the content and render it correctly ...



check out the page here ...

password: 1234


I hope I don't have to ditch all the work I put into it?

/* add a little margin to top of section */
.blog-masonry-wrapper {
  margin-top: 50px;

/* display block and positioning for title */
.blog-masonry-wrapper .blog-title {
  background-color:#fff !important;
  padding: 50px 30px 40px 30px;
  margin-top: -40px

/* center date element */
.blog-meta-section {

/* date element styling */
.blog-masonry-wrapper .blog-date {
  background-color:#000 !important;
  position: fixed;
  z-index: 99;
  width: 80px;
  height: 15px;
  padding: 32.5px 0px;
  margin-top: -51px;
  margin-left: -40px;
  font-family: 'Roboto' !important;
  font-weight: 600 !important;
  font-size:0.8em !important;
  color:white !important;
  border-radius: 40px;

/* hide secondary meta info */
.blog-masonry-wrapper .blog-author {
  display: none !important;

what have I missed?

Thanks in advance!


Link to comment
  • Replies 0
  • Views 1.6k
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.