Gold challenge - why is the content of the nav columns spaced strangely?

[mididoc]

Hi all,

I am working on the Holy Grail layout challenge, and I have gotten it to what I would consider to be 95% of the way there by modelling the “Solved By Flexbox” website. On the left of the “ul” (styled with .thumbnail-item in css), there seems to be an extra 40px of padding that I did not put in the css. Please see the box model diagram in the screenshot…

In Chrome Dev Tools, I do see “-webkit-padding-start: 40px;” in the user agent stylesheet, but I do not know how it got there. Does this have something to do with the way flexbox draws elements on the page?

Thanks!

Mike

[nybblr]

Hi Mike!

By default, many browsers have styling for <ul> tags that adds a left padding area for bullets. To get rid of it, you should be able to add styling like this:

.thumbnail-list-left {
  padding-left: 0;
}

Or you could add a thumbnail-list class to both the left and right thumbnail lists, and change the above CSS code’s selector to .thumbnail-list to make a reusable class. Either way has merits!

~ Jonathan

[mididoc]

Hi Jonathan,

Thanks for your response. Actually, I misspoke. It looks like there is mystery content in both nav columns (in “blue” in Dev Tools) that is messing up the spacing. See screenshots - any ideas?

Thanks, Mike

[nybblr]

Hi Mike!

It’s a bit tricky to tell from that particular screenshot; here are a couple possibilities:

1. The otter list items could have a margin-right that is expanding the ul container.
2. The thumbnail-lists could have a width, min-width, or flex value. For example, if you have flex: 1 on them, they will expand to take up 1/3 of the available space. Try inspecting the styles of the thumbnail-list-left/right and look for flex related properties.

[mididoc]

Hi Jonathan -

Hmmmmmmm. The .thumbnail-list-left and .thumbnail-list-right selectors had flex properties of flex: 0 0 12em;
If I change the flex-basis to 10em, it seems to look a lot better, but this does not sound like a stable solution - more like how it looks on my particular screen size at the time. I have included the relevant css selectors here - not sure what else I can do… Thanks for taking the time to look at this interesting problem.

Regards,
Mike

.thumbnail-image {
    width: 100%;
    display: block;
}

.thumbnail-item {
    min-width: 120px;
    max-width: 120px;
    border: 1px solid rgb(100%, 100%, 100%);
    border: 1px solid rgba(100%, 100%, 100%, 0.8);
    display: inline-block;
}

.thumbnail-list-left, .thumbnail-list-right {
    flex: 0 0 10em;
}

.thumbnail-list-left {
  order: -1;
}

.thumbnail-list-right {
  order: 2;
}

[nybblr]

Hi Mike,

The flex: 0 0 10em; line may be causing the trouble; to let the sidebars use their “natural” size, disable that flex line, then make sure you have flex: 1 on the detail-image-container.

This will tell the browser that when there is extra space, it should just flex the detail-image-container rather than touching the thumbnail-lists.

[mididoc]

Hi Jonathan -

I disabled that line in the css and I have flex: 1 on the detail-image-container. Here’s what I get - something’s not right… Any thoughts?

Regards,
Mike

[nybblr]

Hmm, could you screenshot it when you still have the inspector open? Your media queries for your larger layout are probably taking effect now.

[mididoc]

Hmmmmm. The media queries were commented out. Here is the screenshot. Thanks…

Regards,
Mike

[nybblr]

I think this shows a different problem: before, your media queries enabled a vertical version of the sidebar (thumbnails are stacked on top of each other instead of from left-to-right). See if you can get the vertical stacking back (usually display: block) instead of left-to-right layout.

[mididoc]

Good thought, but that produces no change. CSS is hard!!!