Thumbnails Disappear

When I style .main-content using flex-direction: column; the thumbnails disappear. If I use row, they are there, but of course the detail and thumbnail photos are all in one row. I cannot figure out what I’m doing wrong. Any ideas?

Update: If I change the detail image width to 50%, then the Thumbnails reappear. At 60% or greater, they disappear again.

If the width is 55%, then the thumbnails show at the bottom of the screen, but only the top half. Cannot find my error.

@font-face {
font-family: ‘lakeshore’;
src: url(‘fonts/LAKESHOR-webfont.eot’);
src: url(‘fonts/LAKESHOR-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/LAKESHOR-webfont.woff’) format (‘woff’),
url(‘fonts/LAKESHOR-webfont.ttf’) format (‘truetype’),
url(‘fonts/LAKESHOR-webfont.svg#lakeshore’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

html,body {
height: 100%;
}

body{
display: flex;
flex-direction: column;
font-size: 10px;
background: rgb(149, 194, 215);

}

a{
text-decoration: none;
}

.main-header{
flex: 0 1 auto;
}

.logo-text{
background: white;
text-align: center;
text-transform: uppercase;
font-family: lakeshore;
font-size: 37px;
}

.main-content{
flex: 1 1 auto;
display: flex;
flex-direction: column;
}

.thumbnail-item + .thumbnail-item{
margin-top: 10px;

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

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

.thumbnail-title{
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
font-size: 18px;
}

.detail-image-container{
flex: 1 1 auto;
}

.thumbnail-list{
flex: 0 1 auto;
list-style: none;
padding: 0;
white-space: nowrap;
overflow-x: auto;
order: 2;
}

.detail-image{
width: 45%;
}

did you ever solve the problem?

I have notice that it is a overflow issue when there is no width set for the detail-image-container. When that is set to 50% and the detail-image is set to 100% (to fill its parent) the thumbnail is rendered. Also if you set the overflow of the detail-image-container to hidden the thumbnail is render. So is the fix just setting it to 50%?

Ive come to the conclusion its a box sizing issue

Hello @kevlwig85 and @mjyergin!

I believe that this issue you’re experiencing is the same as this one: When I resize my browser the detail-image of my ottogram grows and overlaps my header

In a nutshell, you and a few other readers have reached a particular scenario (regarding browser size/ratio) where the example does not look right. Make sure to check out some of the solutions other readers have come up with. (They’re linked in that thread.)

Hi @chrisaquino1, @kevlwig85 & @mjyergin:

I had this problem specifically with the thumbnails disappearing; they would only appear if the browser’s width was smaller than its height. With the help of a developer friend (who isn’t proficient in front-end), I found two solutions noted below. The problem is, I don’t know if they will work in the long run or if they affect finishing the rest of Ottergram. I also don’t fully understand what the problem is or why the changes below fix the problem.

Either

1.

html, body {
/* Changed from 100% to auto */
height: auto;
}

OR

2.

.main-content {
/ * Changed from flex: 1 0 auto */
flex: 1 1 auto;
display: flex;
flex-direction: column;
}

1 Like

Thank you for this response, sleepycat. I used the first option and it worked in Chrome. We will see how it affects the rest of the Ottergram project. Firefox hasn’t had any issues yet, just in Chrome as everyone has been saying in here. Like many others in here I still don’t fully understand what the problem is in Chrome. Thanks!

I am having similar issues. Bumping this.

Changing

html, body { height: 100%; }

to

html, body { height: auto; }

did the trick for me.

I believe the reason this works is because setting the html height to 100% sets the window height as the computed value for 100%. Setting the body height to 100% makes its computed height the same as its parent element.

For whatever reason, and I don’t have the spec in front of me so I don’t know if this is the preferred behavior or a bug in Chrome, this crowds out the thumbnail container under certain circumstances—namely when the browser width is a certain amount greater than the browser height.

You could probably also do something like

html { height: 100%; }
body { min-height: 100%; }

or

html { height: 100vw; }
body { min-height: 100vw; }

and make it work. I haven’t tried either of those though, and I could be wrong — my brain is fried from dealing with an energetic 5 year old all day.

1 Like

Let me also just add that I adore how much easier flexbox makes it to create layouts than it was in the Dark Ages of having to deal with things like IE 6 (*spit*) and hacking position: absolute; with negative margins to center a box in the window.

I forgot to mention - you’ll need to set it back to

html, body { height: 100%; }

in the media query in chapter 5 or else the vertical width will expand to fit the whole column of thumbnails.

@jasonsbarr A little help needed can you post the resource zip file here.
Because, when I went to the download page a error showed up saying: 404 page not found.
Help me Jason.

Did you double check and make sure you used the right URL for the resources file? It worked for me yesterday.

1 Like

Yeah, Finally got it!