Category Layout is not aligned

  • jendaddario

    (@jendaddario)


    5 years, 7 months ago

    The layout of this page doesn’t align properly. There should be 2 rows of 3 posts. For some reason, the preview photos are not lining up properly. I’m trying to understand what is causing the preview photos to not line up.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • tugbucket

    (@tugbucket)

    5 years, 7 months ago

    the issue is that your first block, “How to Style a Kimono 3 Ways for Summer”, is taller than the others, just by a few pixels. The min-height in the CSS isn’t going to help if any <article> is taller than the set min-height.

    What you can do is modify your template for these pages to wrap all the <articles> in another div like:

    <div class="flex-article">
your loop for your articles here...
</div>

    then in your CSS:

    
.flex-article {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

    you’re then going to need some media queries for smaller screen so something like:

    @media only screen and (max-width: 1020px) {
.amelia-category-archive.entry { width: 50%; }
}
@media only screen and (max-width: 680px) {
.amelia-category-archive.entry { width: 100%; }
}

    I just guessed at these breakpoints but it seems to look fine to me with that.

    • This reply was modified 5 years, 7 months ago by tugbucket.
    Thread Starter jendaddario

    (@jendaddario)

    5 years, 7 months ago

    Oh I see! Thank you!

    It looks like if my title and/or ‘Filed In’ section is more than 1 line, it bumps everything down. Is there any way to remove the ‘Filed In’ section OR increase the space between blocks to allow for multiple lines in the title and Filed In section?

    Thread Starter jendaddario

    (@jendaddario)

    5 years, 7 months ago

    Assuming I would have to add code here?
    Category Index Page Template (category_index.php)

    tugbucket

    (@tugbucket)

    5 years, 7 months ago

    Is there any way to remove the ‘Filed In’ section OR increase the space between blocks to allow for multiple lines in the title and Filed In section?

    You can but you’d still have the same issue if at any point any item had more copy to it making it larger than the min-height setting. But, that’s what display: flex` solves as it will make every item in the row the height of the tallest so as little or as much content could be added with no future worries.

    As for what file to modify, possibly. Your theme is a paid them so I can’t just download it to look at it. Sounds like it could be it but can’t be sure without seeing it.

    I did notice that the theme demo (http://demo.17thavenuedesigns.net/amelia/category-index/) has the same issue if I insert more items and add more content to a few and the code sample I mentioned above “fixes” it.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Category Layout is not aligned’ is closed to new replies.