Problems with displaying all photos
Hello I have recently updated the photography section of my website, which you can see at http://www.dominicsimpson.co.uk/photography.html
There are 100 photos on there, yet Firefox is missing the first few. I am baffled as to why this is happening. If you view the page in Google Chrome or Microsoft Edge, you'll see that it displays all of the photos, yet Firefox only displays some of them.
I've checked the HTML and CSS, and they validate correctly.
Any help would be much appreciated.
Kind regards Dominic
Chosen solution
Perfect! That all works now. Thank you so much for your help - much appreciated. You've been a really great help!
Dominic
Read this answer in context 👍 0All Replies (3)
Hi Dominic, this is a float containment problem. When you float an element, other elements can slide up next to it. In this case, that seems to crush the width of those first four rows of photos which makes them invisible.
You could remove the float from this rule in your CSS:
.photographytext
{
padding: 1em 5em 1em 1em;
max-width: 100%;
text-align: justify;
float: left;
flex-wrap: wrap;
}
Or if you want to make sure that every row of photos always clear floats from a previous line, you could add a clear to this rule:
.row {
margin-bottom: 10px;
clear: both; /* do not float up into previous content */
}
More info on floats and clearing: https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Floats
Chosen Solution
Perfect! That all works now. Thank you so much for your help - much appreciated. You've been a really great help!
Dominic
Hello,
I am glad to hear that your problem has been resolved. If you haven't already, please select the answer that solves the problem. This will help other users with similar problems find the solution.
Thank you for contacting Mozilla Support.