Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

css - Portfolio page loading images on top of each other

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;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...