Web Hosting
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Sudden Misalignment of Masonry Layout

Discussion in 'Troubleshooting & How-To's' started by Eleanor, Apr 21, 2017.

  1. Eleanor

    New Member

    Joined:
    Apr 21, 2017
    Messages:
    1
    Likes Received:
    0
    Hi,
    I'm a newbie to WP, so go easy on me please! I've been making a digital magazine and was NEARLY finished, until suddenly - out of my two rows of three images on the homepage - the sixth article/image decides to jump, after I modified the nav bar...! I'd include a picture but I can't, with the links rule.



    I just want it in line with the others, and to be the last article on the line. I'm using the Sydney theme. Here's my additional CSS. Although, I've taken all the extra CSS out and it's still bugging.

    Code:
    #masthead.site-header {
      background-color: #18142c;
      height: 53px;
      padding: 9px;
    }
    
    .site-logo {
      width: 240px;
    }
    
    .single #content.page-wrap {
      background-color: #18142c;
      float: none;
      border-color: #18142c;
    }
    
    #mainnav ul li a:hover {
      color: #df60e3;
    }
    
    .overlay {
      height: 0px;
    }
    
    .single .page-wrap .content-wrapper {
      display: block;
      margin-top: -83px;
      text-align: center;
    }
    
    .col-md-9 {
      float: none;
      display: inline;
    }
    
    .panel-grid-cell .widget-title {
      top: -1200px;
      font-size: 50px;
      color: #ffffff;
      font-weight: 800;
      left: -250px;
      margin-top: 40px;
      text-transform: capitalize;
    }
    
    p {
      font-weight: 400;
    }
    
    .panel-row-style {
      font-size: 17px;
      margin-bottom: -190px;
      text-align: justify;
    }
    
    .hentry .title-post {
      text-align: center;
      margin-top: -306px;
      position: static;
    }
    
    .hentry .meta-post span {
      text-align: right;
    }
    
    .entry-date.published {
      text-align: right;
    }
    
    .entry-footer {
      text-align: center;
    }
    
    #commentform.comment-form {
      text-align: center;
    }
    
    #comment {
      text-align: center;
    }
    
    .sidebar-column.col-md-12 {
      margin-top: -590px;
      right: -470px;
    }
    
    .roll-button.button-slider {
      padding: 10px;
      right: 60px;
      bottom: 80px;
      background-color: #d64dd6;
    }
    
    .contain.animated.fadeInRightBig.text-slider {
      bottom: 100px;
    }
    
    .hentry .meta-post {
      margin-top: 270px;
    }
    
    #post-118.post-118.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-uncategorized {
      text-align: center;
    }
    
    #post-116.post-116.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-uncategorized {
      text-align: center;
    }
    
    #post-176.post-176.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-uncategorized {
      text-align: center;
    }
    
    #post-179.post-179.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-uncategorized {
      text-align: center;
    }
    
    #post-172.post-172.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-uncategorized {
      text-align: center;
    }
    
    #content.page-wrap {
      height: 3000px;
    }
    
    .so-widget-sow-image-default-642c5433d908 .sow-image-container .so-widget-image {
      overflow-x: visible;
      overflow: visible;
      overflow-y: visible;
    }
    
    .sidebar-column.col-md-3 {
      width: 02px;
      margin-top: -2100px;
      margin-left: -60px;
    }
    
    #sidebar-footer.footer-widgets.widget-area {
      height: 100px;
    }
    
    .widget-area .widget-title {
      color: #18152b;
      margin-top: -1080px;
      width: 160px;
      margin-left: 560px;
    }
    
    .roll-button:hover {
      background-color: #9345c8;
    }
    
    .textwidget {
      width: 1000px;
      text-align: center;
      position: absolute;
      color: #ffffff;
      font-size: 30px;
      margin-top: 150px;
      margin-left: 100px;
    }
    
    .posts-layout {
      line-height: 32px;
    }
    
    .single .textwidget {
      display: none;
    }
    
    .single .sidebar-column.col-md-3 {
      display: none;
    }
    
    .postid-176 .header-image {
      height: 500px;
    }
    
    .postid-176 .hentry .title-post {
      display: none;
    }
    
    .postid-176 #main.post-wrap {
      margin-top: -301px;
      line-height: 30px;
    }
    
    .postid-179 .header-image {
      height: 500px;
    }
    
    .postid-179 #main.post-wrap {
      margin-top: -320px;
      line-height: 30px;
    }
    
    .postid-179 .hentry .title-post {
      display: none;
    }
    
    #mainnav.mainnav {
      width: 1440px;
      margin-right: -1360px;
    }
    
    #menu-item-30.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-30 {
      margin-right: 400px;
    }
    
    .entry-header {
      text-align: center;
    }
    
    .entry-post p {
      text-align: center;
    }
    
    .col-md-4.col-sm-8.col-xs-12 {
      margin-left: -200px;
      margin-right: -500px;
    }
    
    .li.icon-facebook a {
      font-size: 2px;
    }
    
    .postid-172 .header-image {
      height: 600px;
    }
    
    .postid-172 #main.post-wrap {
      margin-top: -310px;
      line-height: 30px;
    }
    
    .postid-172 .hentry .title-post {
      display: none;
    }
    
    .postid-118 .header-image {
      height: 600px;
    }
    
    .postid-118 #main.post-wrap {
      margin-top: -310px;
      line-height: 30px;
    }
    
    .postid-118 .hentry .title-post {
      display: none;
    }
    
    .postid-116 .header-image {
      height: 600px;
    }
    
    .postid-116 #main.post-wrap {
      margin-top: -310px;
      line-height: 30px;
    }
    
    .postid-116 .hentry .title-post {
      display: none;
    }
    
    .postid-116 #content.page-wrap {
      height: 3700px;
    }
    
    .postid-112 .header-image {
      height: 600px;
    }
    
    .postid-112 #main.post-wrap {
      margin-top: -310px;
      line-height: 30px;
    }
    
    .postid-112 .hentry .title-post {
      display: none;
    }
    
    .page .hentry .title-post {
      display: none;
    }
    
    .page .widget-area .widget-title {
      display: none;
    }
    
    .page .header-image {
      height: 600px;
    }
    
    .page #main.post-wrap {
      margin-top: -120px;
      line-height: 30px;
    }
    
    #menu-item-312.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-312 {
      padding-right: 350px;
    }
    
    #post-112.post-112.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-live.category-reviews {
      margin-left: -20px;
    }
    If it's not the additional CSS that's messing it up, however, does anyone know what it might be? I'm really struggling here. I was so close to getting it done and now can't find the source of the problem. Hopefully someone has some ideas, that would help me massively :) Thanks!
     
    #1
    Last edited: Apr 21, 2017

Share This Page

Web Hosting