I am trying to achieve something like this:
As you can see, the "TITLE" should be centered, whilst the little boxes in the top right corner should be set to flex-end.
After having tried it myself, I wasn't able to achieve what I desired, because the title is also set to flex-end.
Is there any way to do this using flex, and if not, what else could I do to achieve this, whilst also making it somewhat responsive.
Here is a snippet of my HTML and CSS:
#boxContainer {
display: flex;
flex-flow: row;
justify-content: space-evenly;
align-items: center;
height: 120vh;
width: 100%;
background-color: gray;
padding-top: 20vh;
}
.box { /* parent container */
display: flex;
position: static;
justify-content: flex-end;
}
.boxImg {
max-width: 20vw;
height: 70vh;
}
.boxTitle {
position: absolute;
text-align: center;
align-self: center;
font-size: 2.5em;
font-weight: bold;
color: white;
}
.topRightBox {
max-width: 2.5vw;
height: 5vh;
position: absolute;
align-self: flex-start;
margin: 0.5% 0.5% 0 0;
}
<div id="boxContainer">
<div class="box">
<img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
<div class="box">
<img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
<div class="box">
<img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
<div class="box">
<img class="boxImg" src ="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
</div>
Codepen
Thanks in advance.
You can use this code.
For responsive put your style in this block:
#media (max-width: 768px) {}
#boxContainer {
display: flex;
flex-direction: row;
max-width: 1200px;
margin: 0 auto;
}
.box {
position: relative;
width: 23%;
margin: 1%;
border: 1px solid #333;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.boxImg {
width: 100%;
}
.topRightBox {
width: 30px;
height: 30px;
border: 1px solid #333;
position: absolute;
top: 5px;
right: 5px;
}
.boxTitle {
position: absolute;
font-size: 2.5em;
font-weight: bold;
color: white;
}
#media (max-width: 768px) {
#boxContainer {
flex-direction: column;
}
.box {
width: 90%;
margin: 0 auto 20px;
}
}
<div id="boxContainer">
<div class="box">
<img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
<div class="boxTitle">TITLE</div>
<img alt="square"
class="topRightBox"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1">
</div>
<div class="box">
<img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
<div class="boxTitle">TITLE</div>
<img alt="square"
class="topRightBox"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1">
</div>
<div class="box">
<img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
<div class="boxTitle">TITLE</div>
<img alt="square"
class="topRightBox"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1">
</div>
<div class="box">
<img alt="giraffe" class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg">
<div class="boxTitle">TITLE</div>
<img alt="square"
class="topRightBox"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1">
</div>
</div>
Im not sure how to do with with flexbox, but using this code for the .topRightBox achieves the same thing:
.box { /* parent container */
display: flex;
position: relative;
just
.topRightBox {
width: 30px;
height: 30px;
border: 1px solid #333;
position: absolute;
top: 5px;
right: 5px;
}
You can use top and right properties for topRightBox. I specified codes that were added. also, I deleted some codes:
#boxContainer {
display: flex;
flex-flow: row;
justify-content: space-evenly;
align-items: center;
height: 120vh;
width: 100%;
background-color: gray;
padding-top: 20vh;
}
.box {
/* parent container */
flex-basis: 20%;/*here*/
display: flex;
justify-content: center;/*here*/
position: relative;/*here*/
}
.boxImg {
width: 100%;/*here*/
height: 70vh;
}
.boxTitle {
position: absolute;
align-self: center;
font-size: 2.5em;
font-weight: bold;
color: white;
}
.topRightBox {
position: absolute;
top: 5px; /*here*/
right: 5px; /*here*/
max-width: 2.5vw;
height: 5vh;
}
<div id="boxContainer">
<div class="box">
<img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
<div class="box">
<img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
<div class="box">
<img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
<div class="box">
<img class="boxImg" src="https://wallpapercave.com/wp/wp5389930.jpg" alt="giraffe">
<div class="boxTitle">TITLE</div>
<img class="topRightBox" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fdownload%2Fpersian-red%2Fsquare-outline-512.gif&f=1&nofb=1" alt="square">
</div>
</div>
Related
I need to align the elements so that everyone in the block stands exactly without extra spaces
I do it with justify-content: center, elements are centered but look like this
enter image description here
But I need everything to be even, but at the same time it also remains in the center, without extra spaces, like this
enter image description here
important note, when the screen width is larger, the elements should not be in a column but in a row, this is now done, I deliberately reduced the width so that they do not fit
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
}
.item {
position: relative;
padding-left: 28px;
display: flex;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
Add a wrapper (i.e., <div class="wrapper">), everything else can stay the same. The trick is that now the wrapper is centered.
See the snippet below.
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
border: 1px solid red;
}
.item {
position: relative;
padding-left: 28px;
display: flex;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="wrapper">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>
EDIT 1
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
border: 1px solid red;
}
.item {
padding-left: 28px;
display: inline-block;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
}
<div class="flex">
<div class="wrapper">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>
EDIT 2
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
border: 1px solid red;
}
.item {
padding-left: 28px;
display: inline-block;
}
.item:not(:last-child) {
margin-right: 16px;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
}
#media screen and (max-width: 576px) {
.item {
display: flex;
}
}
<div class="flex">
<div class="wrapper">
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>
This is because you are adding img after the text of span, not after span itself.
.flex {
display: flex;
justify-content: center;
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
}
.item {
position: relative;
display: flex;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
min-width: 100px;
max-width: 200px;
}
.item img {
width: 30px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span>Australia</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Italy</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Germany</span><img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
</div>
Do you mean something like this? Hope this answer helps.
You can find more information on flexbox layout here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.flex {
margin-bottom: 24px;
flex-wrap: wrap;
width: 200px;
}
.item {
position: relative;
padding-left: 28px;
}
.item .wrapper{
font-size: 16px;
line-height: 1.5;
max-width: 200px;
display: flex;
align-items: center;
text-align: left;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span class="wrapper"><span class='country'>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span class="wrapper"><span class='country'>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span class="wrapper"><span class='country'>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
.flex {
display: flex;
flex-wrap: wrap;
}
.item {
margin: 0 10px 10px 0;
width: 200px;
display: flex;
justify-content: space-between;
}
.item svg {
position: absolute;
top: 5px;
left: 0;
}
.item span {
display: block;
font-size: 16px;
line-height: 1.5;
max-width: 200px;
}
.item img {
width: 30px;
margin-left: 7px;
display: inline-block;
}
<div class="flex">
<div class="item">
<span>Australia</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Italy</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
<div class="item">
<span>Germany</span> <img src="https://i.imgur.com/Ad3jzMI.jpg">
</div>
</div>
<div class="flex">
<div>
<div class="item">
<span>Australia <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Italy <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
<div class="item">
<span>Germany <img src="https://i.imgur.com/Ad3jzMI.jpg"></span>
</div>
</div>
</div>
Add one more child and wrap all child elements. Its will center the inner content, still keep the child elements in same position.
Im trying to create a book store page and I want the two cards to take up half the page respectively (with 20px gap). I already set the parent, .book-cards, to 1fr 1fr and card-top, to width: 100% so that it will take up 100% of the grid area which is half of the page.
If you run the code, the cards are clearly not taking up half of the page.
.book-section-title {
text-align: center;
font-family: 'Recoleta', sans-serif;
font-size: 35px;
}
.card-img {
width: 90%;
height: 90%;
border-radius: 5px;
}
.card-top {
height: 100%;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #e3dcee;
border-radius: 7px;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
width:fit-content;
height: 100%;
}
.book-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
gap: 20px
}
.book-title {
text-align: center;
width: 165px;
color: #5a5a5a;
font-family: 'Widy-Thin';
font-size: 14px;
color: black;
}
<div class="book-cards">
<div class='card'>
<div class="card-top">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
</div>
<div class="card-bottom">
<p class="book-title">Think Life Like A Monk</p>
</div>
</div>
<div class='card'>
<div class="card-top" style="background-color: #f0edf5">
<img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" class="card-img">
</div>
<div class="card-bottom">
<p class="book-title">Wonder</p>
</div>
</div>
Remove width: fit-content; on .card.
.book-section-title {
text-align: center;
font-family: 'Recoleta', sans-serif;
font-size: 35px;
}
.card-img {
width: 90%;
height: 90%;
border-radius: 5px;
}
.card-top {
height: 100%;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #e3dcee;
border-radius: 7px;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.book-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
gap: 20px
}
.book-title {
text-align: center;
width: 165px;
color: #5a5a5a;
font-family: 'Widy-Thin';
font-size: 14px;
color: black;
}
<div class="book-cards">
<div class='card'>
<div class="card-top">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
</div>
<div class="card-bottom">
<p class="book-title">Think Life Like A Monk</p>
</div>
</div>
<div class='card'>
<div class="card-top" style="background-color: #f0edf5">
<img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" class="card-img">
</div>
<div class="card-bottom">
<p class="book-title">Wonder</p>
</div>
</div>
</div>
.card-top,
card,
img {
width: 100%;
}
<center>
<div class="book-cards">
<div class='card'>
<div class="card-top">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
</div>
<div class="card-bottom">
<p class="book-title">Think Life Like A Monk</p>
</div>
</div>
<div class='card'>
<div class="card-top" style="background-color: #f0edf5">
<img src="https://bci.kinokuniya.com/jsp/images/book-img/97805/97805525/9780552565974.JPG" alt="card-1" class="card-img">
</div>
<div class="card-bottom">
<p class="book-title">Wonder</p>
</div>
</div>
</div>
</center>
These are my two flexboxes, one for text and the other for category links. I'm trying to lay the category pictures as 2 by 2. I tried to use row wrap, and center the contents, but it didn't work. I also used various methods using containers, but it always ends up 1 x 4... Also, I'm trying to hover option to fit perfectly into the image, but somehow I have the hover background image not perfectly fit with the image although it's height and width is set to 100%.
How can I solve these issues?
.flex-container {
display: flex;
justify-content: center;
flex-direction: row;
width: 800px;
}
.flex-container > div {
margin: 10px;
padding: 20px;
font-size: 20px;
text-align: center;
flex-flow: row wrap;
}
.one {
flex: 1 1 auto;
}
.two {
flex: 1 1 auto;
}
div.two a > img {
padding: 10px;
margin: 10px;
}
a {
text-decoration: none;
}
h1 {
display: block;
font-size: 1.3em;
margin: 0.67em 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 0.8em;
margin: 0.83em 0;
font-weight: bold;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 200%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: darkorchid;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: Black;
font-size: 18px;
position: absolute;
top: 30%;
left: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<section>
<div class="flex-container">
<div class="one"> <h1> Welcome to Delicious Book store, <br>
where you can find so many delicious food!</h1>
<p> As a specialized book store, we have many cooking books on
holiday specials, vegetarian, desserts and cultural cuisines!</p>
</div>
<div class="two"> <h2> Shop By Category </h2>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Holiday</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Dessert</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Vegetarian</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Cultural Cuisine</div>
</div></a>
</div>
</div>
</div>
</section>
I've wrapped your boxes with flex container, and change some css regards width of the boxes and their content. Also added width: 100% to your .flex-container.
.flex-container {
display: flex;
justify-content: center;
flex-direction: row;
width: 100%;
}
.flex-container > div {
margin: 10px;
padding: 20px;
font-size: 20px;
text-align: center;
flex-flow: row wrap;
width: 500%;
}
.one {
flex: 1 1 auto;
}
.two {
flex: 1 1 auto;
}
a {
text-decoration: none;
}
h1 {
display: block;
font-size: 1.3em;
margin: 0.67em 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 0.8em;
margin: 0.83em 0;
font-weight: bold;
}
.container {
position: relative;
width: calc(50% - 20px);
margin: 10px;
}
.image {
display: block;
width: 100%;
height: 100%;
min-height: 75px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: darkorchid;
min-height: 75px;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: Black;
font-size: 18px;
position: relative;
text-align: center;
padding: 10px;
}
.images-container{
display: flex;
flex-wrap: wrap;
}
<section>
<div class="flex-container">
<div class="one"> <h1> Welcome to Delicious Book store, <br>
where you can find so many delicious food!</h1>
<p> As a specialized book store, we have many cooking books on
holiday specials, vegetarian, desserts and cultural cuisines!</p>
</div>
<div class="two"> <h2> Shop By Category </h2>
<div class="images-container">
<div class="container">
<a href="category.html">
<img src="https://via.placeholder.com/150" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Holiday</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="https://via.placeholder.com/150" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Dessert</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="https://via.placeholder.com/150" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Vegetarian</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="https://via.placeholder.com/150" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Cultural Cuisine</div>
</div></a>
</div>
</div>
</div>
</div>
</section>
This should be fairly simple, however I am stumped as to why it is not working. The div (logo-and-text) inside the container (logo-wrapper) does not want to work with position absolute and the parent as position relative. If I do the individual image inside the div or the text it works.
I've tried setting the height of the container, setting margins to zero, checked in chrome dev tools.
<section id="contact-me-section">
<div id="contact-me-section-wrapper">
<div id="have-a-question-wrapper">
<h2 class="contact-h2">HAVE A QUESTION?</h2>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/location.png" alt="">
<p class="contact-p">Dayton, Ohio</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/phone.png" alt="">
<p class="contact-p">( 937 ) 336-9359</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/email.png" alt="">
<p class="contact-p">contact#ryanjthacker.com</p>
</div>
</div>
<div id="logo-wrapper">
<div id="logo-and-text">
<img src="images/logo.png" alt="">
<p>Copyright © 2019 Ryan Thacker - All rights reserved</p>
</div>
</div>
<div id="connect-with-me-wrapper">
<h2 class="contact-h2">CONNECT WITH ME</h2>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/facebook_white.png" alt="">
<p class="contact-p">Facebook</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/linkedin_white.png" alt="">
<p class="contact-p">LinkedIn</p>
</div>
<div class="connect-with-me-image-wrapper">
<img class="contact-img" src="images/github_white.png" alt="">
<p class="contact-p">GitHub</p>
</div>
</div>
</div>
</section>
#contact-me-section {
color: white;
background-color: black;
height: auto;
width:100%;
}
#contact-me-section-wrapper {
display: flex;
text-align: center;
justify-content: center;
}
#have-a-question-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 100px;
}
#logo-wrapper {
margin-left: 150px;
margin-right: 150px;
position: relative;
height: 100%;
}
#logo-and-text {
position: absolute;
bottom: 0;
}
#logo-wrapper img {
width: 116px;
margin: 10px;
}
#connect-with-me-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 100px;
}
.contact-h2 {
font-size: 17px;
margin: 20px;
padding-top: 60px;
padding-bottom: 30px;
text-align: left;
}
.contact-p {
color: #989898;
margin-top:auto;
margin-bottom:auto;
font-size: 15px;
}
.contact-img {
width: 60px;
margin: 20px;
}
.connect-with-me-image-wrapper {
display: flex;
flex-direction: row;
}
I believe I have solved it, its due to using flex box. The solution is a much easier and flexible way to do it.
Instead I just used align-self: flex-end; to the container.
I have nested flexboxes with some images inside, it looks good in Chrome, but in IE you can see the borders on the flex-item-wrapper are not flush against the bottom of the image. By the way, in the layout I will sometimes have several flex-row with many pictures.
.flex-list {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
}
.flex-item-wrapper {
width: 100%;
border: 1px solid green;
}
.flex-item {
height: 100%;
width: 100%;
border: 1px solid blue;
}
.picture {
width: 100%;
}
<div class="flex-list">
<div class="flex-row">
<div class="flex-item-wrapper">
<div class="flex-item">
<a href='#'>
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</a>
</div>
</div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
</div>
</div>
This seems to be working:
.flex-row {
display: flex;
flex: 0 0 auto; /*added*/
}
or
.flex-row {
display: flex;
height: 100%; /*added*/
}
See simplified demo:
.flex-list {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex: 0 0 auto;
}
.flex-item {
flex: 1;
border: 1px solid blue;
}
.picture {
width: 100%;
height: auto;
}
<div class="flex-list">
<div class="flex-row">
<div class="flex-item">
<a href='#'>
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</a>
</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</div>
The problem seems due to the nesting flexbox. This fixes it:
.flex-row {
width: 100%;
align-self: flex-start;
}
.flex-list {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
width: 100%;
align-self: flex-start;
}
.flex-item-wrapper {
width: 100%;
border: 1px solid green;
}
.flex-item {
height: 100%;
width: 100%;
border: 1px solid blue;
}
.picture {
width: 100%;
}
<div>
<div class="flex-list">
<div class="flex-row">
<div class="flex-item-wrapper">
<div class="flex-item">
<a href='#'>
<img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
</a>
</div>
</div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
<div class="flex-item-wrapper"></div>
</div>
</div>
<div></div>
</div>