Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 blog - masonry margin, padding display problem



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 post
  • Answers 0
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

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

  • Create New...