Grid and flexbox layout - archive page

HTML & CSS
1

I am working on archive page where I used

.archive {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  outline: 1px solid green;
}

to keep max width at 780px. Out of curiosity when I remove width: 100% in the above rule the output box becomes narrower. When I hover over <main class="archive"> in dev tools, the width of the content box is showing as 538.05 - rest is the space taken by left and right auto margins.

On previous blog page and single post view page I used

.blog, .blog-single{
  max-width: 780px;
  margin: 0 auto;
  outline: 1px solid green;
}

where I didn’t need to use width: 100%; to keep max-width at 780px.

Why do I need width: 100%; on .archive rule above to keep it at 780px whereas I didn’t need it on blog and single post view page?

2

Remove that width: 100% on the archive page and notice how it’s perfectly wide enough to fit all the content on one line.

Now notice the amount of content on the other pages. :slight_smile:

Hopefully that’s enough of a hint.

2 Likes
3

I did it before and the page shrinks and gets narrower as the calculated width is no longer 780px. I guess my questions if its possible to keep archive page at max-width 780px without resorting to width 100%

4

You’re flexing the body element. That shrink-to-fits the children :slight_smile: . So no; not how you currently have it built, anyway.

2 Likes
5

Yes. However why max-width 780 works on .blog, .blog-single without width: 100% :thinking:
I am trying to achieve something similar to https://snook.ca/archives/ for my archive page

6

Did you not understand that it’s only because you have enough content that the text is wrapping? Go to your archive page and leave 1 word of text. I gave you the hint in my first reply (Post #2) .

1 Like
7

Thanks @RyanReese :slightly_smiling_face: I understand - no way to keep it at 780 without width 100%. On blog and single view pages its just the amount of content that pushes the element width to 780 max and then text just wraps…

8

What would be the proper way to control what happens to post title and post date at different screen sizes? Say I was thinking of adding .archive > div { flex-flow: row wrap; } to preceding media query (max-width: 420px) however because post titles would vary in length that doesn’t seem like a good solution because on some posts with shorter titles date wouldn’t wrap

archive-page-dev-tools
archive-page-dev-tools312Ă—617 32.1 KB

9

Hi,
Rather than changing to flex-flow: row wrap; you can just reset the div to display:block from flex and let them all stack as blocks regardless of title lengths.

The children will no longer be flex items and they will follow their default rules.
Your date is in a div so it stacks below the anchor (post title) as a block.

@media all and (max-width: 500px) {
   .archive > div { 
      display: block;
   }
}

blocks
blocks458Ă—700 29.8 KB

2 Likes
10

Thanks Ray. Your solution works much better.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.