• I’m having an issue with the Portfolio front page. I’ve created all of my portfolio posts, and up until I added the most recent one, everything was going fine. However, since adding this one portfolio post, my 8 “preview” posts no longer line up in a grid.

    I’ve managed to get as far as seeing that the one post in question seems to be 5 (FIVE) pixels too large in the thumbnail image, which seems to be what is causing the layout to jump all over the place (it won’t put any other thumbnails underneath this one). Nothing appears to be different in the way this portfolio post was created to the others, but when I take a look at the HTML for each object, the one causing the issues is very different than the ones that are working properly.

    Here is an example of the HTML for one of the thumbnail boxes that is working perfectly on the front page:

    <img width="480" height="480" src="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/glasses.png?resize=480%2C480" class="attachment-portfolio-square size-portfolio-square wp-post-image" alt="" srcset="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/glasses.png?resize=150%2C150 150w, https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/glasses.png?resize=480%2C480 480w, https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/glasses.png?zoom=2&resize=480%2C480 960w" sizes="(max-width: 480px) 100vw, 480px" data-attachment-id="146" data-permalink="https://www.adampsteele.com/portfolio/safety-glasses/glasses/" data-orig-file="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/glasses.png?fit=1198%2C850" data-orig-size="1198,850" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="glasses" data-image-description="" data-medium-file="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/glasses.png?fit=300%2C213" data-large-file="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/glasses.png?fit=882%2C626">

    And here is the HTML for the thumbnail that is causing the others to jump out of line:

    <img width="474" height="480" src="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/sinestro_final-01.jpg?resize=474%2C480" class="attachment-portfolio-square size-portfolio-square wp-post-image" alt="" data-attachment-id="135" data-permalink="https://www.adampsteele.com/portfolio/sinestro-comic-book-cover__trashed/sinestro_final-01/" data-orig-file="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/sinestro_final-01.jpg?fit=474%2C710" data-orig-size="474,710" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="sinestro_final-01" data-image-description="" data-medium-file="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/sinestro_final-01.jpg?fit=200%2C300" data-large-file="https://i0.wp.com/www.adampsteele.com/wp-content/uploads/2017/04/sinestro_final-01.jpg?fit=474%2C710">

    Now, I’ve tried deleting the whole post and recreating it, changing the dimensions of the featured image, cropping the featured image, and trying to add some custom CSS to prevent it from getting too tall. None of these worked — the CSS came the closest, but the moment the page was re-sized all other kinds of problems started cropping up (images too small/big for their backgrounds, etc.).

    I did delete and re-add the featured image — that let everything else line up. As soon as I added the featured image back to the page, the problem started again.

    Unfortunately, we aren’t ready to publish the site yet, so you won’t be able to see the issue in real-time. I’m happy to provide code snippets of other things if that would help.

    I’ve also created an album of screenshots that show exactly what’s happening, as I don’t think I did the best job of explaining this: https://imgur.com/a/qa71o

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Portfolio front page not lining up’ is closed to new replies.