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 ...

image.thumb.png.27d401565abc6680ba98ad8986894f2f.png

 

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

image.thumb.png.6b7db42594318a86ad832e3f3c8dff8b.png

 

check out the page here ...

https://tambourine-orca-xhby.squarespace.com/news
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 {
  width:100%;
  text-align:center;
}

/* 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;
  text-align:center;
  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!

-lh

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.