I have a flex grid of 4 photos on the top row and 4 photos on the bottom row. Everything looks good so far except for one major problem. There is a gap to the right side of the container. The footer takes up the full width of the page but the photo grid has a gap to the right. I have tried setting negative margins and all sorts of other things that I read about in the forums but I can’t fix it.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body,
html {
margin: 0 0 0 0;
padding: 0;
overflow-x: hidden;
width: 100%;
}
.container {
overflow-x: hidden;
min-width: 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: auto;
}
img {
opacity: 0.7;
}
img:hover {
opacity: 1;
}
.facebook-photo > a.tooltip > img {
/*Setting display to block removed the gap that was under the images */
display: block;
height: 50vh;
padding: 0 !important;
min-width: 24vw;
width: 24vw;
}
.facebook-photo {
margin: 0 0 0 0;
padding: 0 !important;
}
footer {
height: 20vh;
background-color: black;
color: white;
padding-top: 30px;
text-align: center;
}
@media screen and (max-width: 600px) {
.container {
flex-wrap: nowrap;
flex-direction: column;
width: 100%;
}
.facebook-photo > a.tooltip > img {
width: 100%;
height: 100%;
margin: 0;
}
}
/* styles for the tooltips */
.facebook-photo {
position: relative;
}
a.tooltip {outline:none; }
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:0;
display:none;
}
a.tooltip:hover span{
display:block;
position:absolute;
top: 100px;
left: center;
padding: 10px 20px;
border:2px solid #000;
border-radius: 5px;
color:#000;
background:#fff;
width: 300px;
z-index: 12;
}
img {
z-index: 1;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
This is an older picture but we're so stupid so yep.
</span>
<img src="resources/img/facebook/1.jpg" alt="This is an older picture but we're so stupid so yep. ">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
with Quinn Lastname and Stephen Lastname
</span>
<img src="resources/img/facebook/2.jpg" alt="with Quinn Lastname and Stephen Lastname.">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
with Sandy Lastname
</span>
<img src="resources/img/facebook/3.jpg" alt="with Sandy Lastname."> </a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
with Andrea Lastname, Stuart Lastname and Quinn Lastname.
</span>
<img src="resources/img/facebook/4.jpg" alt="with Andrea Lastname, Stuart Lastname and Quinn Lastname.">
</a>
</div>
</div>
<div class="container">
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
with Walaa Lastname and Quinn Lastname
</span>
<img src="resources/img/facebook/5.jpg" alt="with Walaa Lastname and Quinn Lastname.">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
with Carrie and Stephan Lastname
</span>
<img src="resources/img/facebook/6.jpg" alt="with Carrie and Stephan Lastname">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
with Quinn and Mattie Lastname
</span>
<img src="resources/img/facebook/7.jpg" alt="with Quinn and Mattie Lastname">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>
with Quinn Lastname, Claudet Lastname and Amy Sittnick Lastname at Occoquan Historic District
</span>
<img src="resources/img/facebook/8.jpg" alt="with Quinn Lastname, Claudet Lastname and ALastname at Occoquan Historic District.">
</a>
</div>
</div>
<footer><a href="https://www.mydomainname.com">www.mydomainname.com</a></footer>
</div>
</body>
</html>
What is determining the width of the items in each row? Do they add up to 100% or 100vw? If not, why not? (Hint, at this moment it is the alt text; but if it weren’t…)
If .container is assigned display:flex, then the immediate children of the flex container must be the flex items. It looks like you want them to be an equal 4 across so each one should be 25% or equivalent. With that thought in mind, it doesn’t seem practical to try to assign the widths to the images themselves, does it? Also, I don’t think you have considered that the aspect ratio of your facebook images may depend on the aspect ratio of the browser window.
Give it another go. Validate your code before posting and include a dummy image to simulate the ones from facebook. You are off to a good start but just haven’t thought through the dynamics of what infuences or limits what.
This is not a solution. Just a few changes to your code just to give you an idea of where some changes might be helpful. You might decide that you don’t want to use defined rows, who knows. Please read the comments. There is a lot more to do.
Your code is easier to troubleshoot if it is formatted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
html,body {
margin: 0;
}
body {
/* overflow-x: hidden; /* never needed */
/* width: 100%; /* body fills available width */
padding: 0;
}
.container {
/* overflow-x: hidden; /* not needed */
/* min-width: 0; /* not needed */
/* width: 100%; /* block box fills available width */
/* height: auto; /* not needed */
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.facebook-photo {
width:25%;
/* padding: 0 !important; /* WHY !important???? NOT Needed!!!! */
/* margin: 0; /* not needed */
background-color:rgba(255,0,0,0.1); /* Visualize Image Area */
}
.facebook-photo > a.tooltip > img {
display: block; /* Setting display to block removed the gap that was under the images */
/* min-width: 24vw; /* not appropriate */
/* width: 24vw; /* not appropriate */
height: 40vh; /* REDUCED from 50vh for TESTING Purposes */
/* padding: 0 !important; /* WHY !important???? NOT Needed!!!! */
}
img {
z-index: 1;
opacity: 0.7;
outline:1px solid red; /* Visualize img size */
}
img:hover {
opacity: 1;
}
footer {
height: 20vh;
background-color: black;
color: white;
padding-top: 30px;
text-align: center;
}
@media screen and (max-width: 600px) {
.container {
flex-wrap: nowrap;
flex-direction: column;
width: 100%;
}
.facebook-photo > a.tooltip > img {
width: 100%;
height: 100%;
margin: 0;
}
}
/* styles for the tooltips */
.facebook-photo {
position: relative;
}
a.tooltip {outline:none;}
a.tooltip span {
z-index:0;
display:none;
}
a.tooltip:hover {text-decoration:none;}
a.tooltip:hover span {
display:block;
width: 300px;
position:absolute;
top: 100px;
left: center;
padding: 10px 20px;
border:2px solid #000;
border-radius: 5px;
color:#000;
background:#f0f;
z-index: 12;
}
</style>
</head>
<body>
<div class="container">
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>This is an older picture but we're so stupid so yep.</span>
<img src="resources/img/facebook/1.jpg" alt="This is an older picture but we're so stupid so yep. ">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>with Quinn Lastname and Stephen Lastname</span>
<img src="resources/img/facebook/2.jpg" alt="with Quinn Lastname and Stephen Lastname.">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>with Sandy Lastname</span>
<img src="resources/img/facebook/3.jpg" alt="with Sandy Lastname.">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>with Andrea Lastname, Stuart Lastname and Quinn Lastname.</span>
<img src="resources/img/facebook/4.jpg" alt="with Andrea Lastname, Stuart Lastname and Quinn Lastname.">
</a>
</div>
</div>
<div class="container">
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>with Walaa Lastname and Quinn Lastname</span>
<img src="resources/img/facebook/5.jpg" alt="with Walaa Lastname and Quinn Lastname.">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>with Carrie and Stephan Lastname</span>
<img src="resources/img/facebook/6.jpg" alt="with Carrie and Stephan Lastname">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>with Quinn and Mattie Lastname</span>
<img src="resources/img/facebook/7.jpg" alt="with Quinn and Mattie Lastname">
</a>
</div>
<div class="facebook-photo">
<a href="#" class="tooltip">
<span>with Quinn Lastname, Claudet Lastname and Amy Sittnick Lastname at Occoquan Historic District</span>
<img src="resources/img/facebook/8.jpg" alt="with Quinn Lastname, Claudet Lastname and ALastname at Occoquan Historic District.">
</a>
</div>
</div>
<footer><a href="https://www.mydomainname.com">www.mydomainname.com</a></footer>
</body>
</html>
Thank you, ronpat for improving my CSS. I am using notepad++ as my editor and it doesn’t format the HTML. Can you suggest a better editor that would format my code?
Be aware of the problem that Ron mentioned above when stretching images as that will break their aspect ratio. You will rarely (if ever) stretch real world images unless you preserve their aspect ratio. You can do this with object-fit:cover applied to the img element but that will result in width or height being cropped in order to maintain coverage of the area concerned.
There are many online code beautifiers around the web where you can post you html,css and js to get it formatted for you. There are also built in code formatters in codepen which is free and easy to use.
I formatted your code just as I format my own, manually. For example, in the HTML, I didn’t find it inconvenient to format one of your image holders and then basically duplicate it 8 times. I think you did the same thing except your code was very loosely formatted… and the page ended up with an extra </div>. The additional few minutes needed to format the CSS happened anyway while I figured out how to make your nearly invisible page display something on the screen so I could visualize the objects on your page, the space at the right edge, and generally tell how the page worked or didn’t work.
I use the time spent formatting to think and test, so it’s useful to me.
Larger pages or entire sites would probably require a different strategy as @PaulOB mentioned.
<aside>
Personally, I appreciate your “working page” presentation.
