css - Portfolio page loading images on top of each other

Question

Forgive me if my problem is easily solvable.

My photography page loads my portfolio thumbnails on top of each other. It doesn't seem to fix itself unless I resize my window size, or refresh the page. If I clear my history and go back to the site the positioning is all messed up again as well.

When it loads wrong

How it should look

My site: https://raymondrivenbark.com/portfolio-layouts/photography/

/** 03. PORTFOLIO
================================================== **/

.entry .entry__header {
  width: 100%;
  margin-top: 25px;
}

.entry .entry__header .title {
  display: inline-block;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.entry .entry__header .cat {
  display: block;
  font-size: 16px;
  font-style: italic;
}

.entry .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.entry .overlay .overlay__caption {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.entry .overlay .overlay__caption .text {
  display: table-cell;
  vertical-align: middle;
  padding: 0 50px;
}

.entry .overlay .overlay__caption .text span.title {
  display: block;
  font-size: 20px;
  font-weight: 900;
}

.entry .overlay .overlay__caption .text span.cat {
  font-size: 15px;
  font-style: italic;
}

.entry:hover .overlay {
  opacity: 1;
  visibility: visible;
}

.portfolio__filters {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.portfolio__filters.visible {
  opacity: 1;
  visibility: visible;
}

.portfolio__filters ul {
  position: absolute;
  bottom: 50px;
  left: 100px;
  max-width: 70%;
}

.portfolio__filters ul li {
  display: inline-block;
  position: relative;
  font-size: 40px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.portfolio__filters ul li:not(:last-child):after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 1px;
  margin: 0 25px;
}

.portfolio__filters ul li:not(.title) {
  cursor: pointer;
}

.portfolio__filters ul li.title {
  display: block;
  font-family: 'Lato';
  font-size: 14px;
  margin-bottom: 25px;
}

.portfolio__filters ul li.title:after {
  display: none;
}

.portfolio__filters ul li .counter {
  font-family: 'Cardo';
  font-size: 14px;
}

.portfolio__filters .close__filters {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.portfolio__filters .close__filters:before,
.portfolio__filters .close__filters:after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  margin-top: -1px;
}

.portfolio__filters .close__filters:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.portfolio__filters .close__filters:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.pages {
  margin: 100px 0 0;
  text-align: center;
  line-height: 1;
}

.pages li {
  display: inline-block;
  min-width: 60px;
  height: 60px;
  font-size: 40px;
  font-weight: 900;
  line-height: 60px;
  vertical-align: middle;
}

.pages li.of {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Cardo';
  font-size: 14px;
  margin: 0 50px;
}

.pages li.prev,
.pages li.next {
  font-size: 16px;
}

.pages li a {
  display: block;
}

@media (max-width: 600px) {
  .pages li {
    font-size: 30px;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
  }
  .pages li.of {
    margin: 0 25px;
  }
}

.works__hover__mouse {
  white-space: nowrap;
  font-size: 20px;
  font-weight: 900;
  padding: 10px 25px;
  position: fixed;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}

.works__hover__mouse.visible {
  opacity: 1;
  visibility: visible;
}

.works__hover__mouse .work__cat {
  display: block;
  font-family: 'Cardo';
  font-size: 16px;
  font-weight: normal;
  font-style: italic;
}

.works__hover__fade {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: table;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.works__hover__fade.visible {
  opacity: 1;
  visibility: visible;
}

.works__hover__fade div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 60px;
  font-weight: 900;
}

.works__hover__fade div .work__cat {
  display: block;
  font-family: 'Cardo';
  font-size: 18px;
  font-weight: normal;
  font-style: italic;
}

.project__cat {
  font-family: 'Cardo';
  font-size: 16px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.project__images .project__img {
  position: relative;
  text-align: center;
}

.project__images .project__img:not(:last-child) {
  margin-bottom: 100px;
}

.project__images .project__img a {
  display: inline-block;
}

.project__images .project__img img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}

.project__share {
  margin-top: 100px;
  text-align: center;
}

.project__share h5 span {
  display: block;
  font-size: 15px;
}


/** 11. WordPress
-------------------------------------------------- **/

.d-none {
  display: none !important;
}

img {
  max-width: 100%;
  height: auto;
}

.widget {
  margin-bottom: 50px;
}

.widget:last-child {
  margin-bottom: 0;
}

.sticky {
  background: #fcfcfc;
  padding: 0 30px 30px;
  border: 1px solid #eee;
}

.bypostauthor img.avatar {
  border-color: #fff;
}

.screen-reader-text,
p:empty {
  display: none;
}

select {
  max-width: 100%;
  width: 100%;
}

.alignleft,
.aligncenter,
.alignright,
.alignnone {
  margin-bottom: 25px;
}

.alignnone {
  display: block;
}

.alignleft {
  float: left;
  margin: 0 30px 30px 0 !important;
}

.alignright {
  float: right;
  margin: 0 0 30px 30px !important;
}

.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

figure.aligncenter a {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.aligncenter {
  text-align: center;
}

table#wp-calendar {
  border: 1px solid #cccccc
}

table#wp-calendar>tbody>tr>td>a {
  text-decoration: underline
}

table#wp-calendar thead>tr>th {
  width: 35px;
  height: 20px;
  text-align: center;
  border: 1px solid #cccccc;
}

table#wp-calendar tbody>tr>td {
  width: 35px;
  height: 20px;
  text-align: center;
  border: 1px solid #cccccc;
}

table#wp-calendar tfoot>tr>td>a,
tfoot>tr>td>a:link,
tfoot>tr>td>a:visited,
tfoot>tr>td>a:hover,
tfoot>tr>td>a:active {
  text-decoration: underline;
  height: 23px;
  margin-left: 10px;
  padding-bottom: 3px;
}

table#wp-calendar tfoot>tr>td#prev {
  width: 58px;
  height: 20px;
  text-align: left;
}

table#wp-calendar tfoot>tr>td#next {
  width: 58px;
  height: 20px;
  text-align: right;
}

.widget_rss li {
  margin-bottom: 25px;
}

.widget_rss .rsswidget {
  clear: both;
}

.rssSummary {
  margin: 10px 0;
}

.widget_rss cite {
  font-size: 12px;
}

.post__content ul,
.desc ul {
  list-style: square;
  list-style-position: inside;
  margin-left: 20px;
  margin-bottom: 40px;
}

.post__content ol,
.desc ol {
  list-style: decimal;
  list-style-position: inside;
  margin-left: 20px;
  margin-bottom: 40px;
}

.post__content ul ul,
.post__content ol ol,
.desc ul ul,
.desc ol ol,
.post__content ul ol,
.post__content ol ul {
  margin-bottom: 0;
}

pre {
  word-wrap: break-word;
}

dd {
  padding: .5em 0;
}

dl {
  width: 100%;
}

dt,
dd {
  display: inline-block;
  width: 30%;
}

dt {
  text-align: right;
  font-weight: bold;
  clear: left;
  float: left;
}

dd {
  width: 70%;
  padding-left: 1em;
  clear: right;
}

dd+dd {
  float: right;
  clear: both;
}

dt:first-child {
  padding-top: .5em;
}

dd+dt {
  clear: both;
  padding-top: .5em;
}

dt+dt {
  width: 100%;
  float: none;
  padding: 0 70% 0 0;
}

dt+dt+dd {
  margin-top: -2em;
}

dt+dt+dd+dt {
  margin-top: 2em;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #eeeeee;
  padding: 8px;
}

tr:nth-child(even) {
  background: #fcfcfc;
}

iframe {
  max-width: 100%;
}

hr {
  clear: both;
}

.post-categories li {
  display: inline;
}

.post-categories li+li {
  margin-left: 5px;
}

.gallery {
  display: block;
  clear: both;
}

.wp-caption {
  max-width: 100%;
  text-align: center;
}

.wp-caption img {
  margin-bottom: 10px;
}

.gallery .gallery-icon {
  width: 100%;
  padding: 0 10px;
  text-align: center;
}

.gallery .gallery-icon img {
  border: none !important;
}

.gallery-caption {
  margin: 20px 0;
  max-width: 100%;
  text-align: center;
  z-index: 999;
}

.wp-caption-text,
.gallery-caption-text {
  margin: 6px 0;
  font-style: italic;
  font-size: 90%;
  line-height: 120%;
  color: #666;
  padding-left: 0;
  width: 100%;
}

.post__content .gallery {
  overflow: hidden;
}

.logo img {
  max-width: 240px;
  vertical-align: top;
}

img {
  max-height: 80vh;
  width: auto;
}

.single .post__content {
  padding-top: 25px;
}


/** 11. Gutenberg
-------------------------------------------------- **/

.wp-block-pullquote {
  border: none;
}

.page .alignfull,
.page .alignwide {
  margin-left: calc( -100vw / 2 + 100% / 2);
  margin-right: calc( -100vw / 2 + 100% / 2);
  max-width: 100vw;
}

@media only screen and ( min-width: 950px) {
  .page .alignwide {
    margin-left: -125px;
    margin-right: -125px;
    max-width: 1150px;
  }
}

.container .wp-block-gallery {
  margin: 0 -8px 25px;
}

.wp-block-gallery li {
  float: left;
}

.wp-block-gallery:after,
.wp-block-cover-image:after {
  content: '';
  display: table;
  clear: both;
}

Answer 1

Waitting for answers