I am writing a landing page using css/flexbox and I'm struggling to get some images to be equal size. The logo images I have are all different sizes and I want them to be equal size, clickable links. I was able to achieve this by creating a css table, but would really like to use flexbox, if possible.
Here is the code in question:
.how-to-buy {
/*rgba used to add opacity*/
background-color: rgba(255,255,255,0.4);
border: hidden;
border-radius: 25px;
/* make sure there is space between buttons and bottom of page */
margin-bottom: 30px;
padding: 10px;
max-width: 90%;
text-align: center;
}
.ebook-links img {
border-radius: 15px;
}
.ebook-links img:hover {
}
.how-to-buy{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.ebook-links{
max-width: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.logo1{ flex: 2.07;}
.logo2{ flex: 2.4;}
.logo3{ flex: 3;}
.logo4{ flex: 2.8;}
.logo5{ flex: 2.43;}
<div class="how-to-buy">
<p>This collection includes nineteen tales of faeries and magic at Midwinter. Available Now online:</p>
<div class="ebook-links">
<a href=#>
<img class="logo1" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/amazon-logo_black-300x145.png" /></a>
<a href=#>
<img class="logo4" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/ibooks-300x108.png" /></a>
</div>
</div>
I thought that setting the logo flex values equal to their aspect ratios would work, but it doesn't seem to...
How about you put max-height to the img tag, if you set only 'width' or only 'height' to an img tag the image does not lose the aspect ratio
.how-to-buy {
/*rgba used to add opacity*/
background-color: rgba(255,255,255,0.4);
border: hidden;
border-radius: 25px;
/* make sure there is space between buttons and bottom of page */
margin-bottom: 30px;
padding: 10px;
max-width: 90%;
text-align: center;
}
.ebook-links img {
border-radius: 15px;
max-height:50px;
}
.ebook-links img:hover {
}
.how-to-buy{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.ebook-links{
max-width: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.logo1{ flex: 2.07;}
.logo2{ flex: 2.4;}
.logo3{ flex: 3;}
.logo4{ flex: 2.8;}
.logo5{ flex: 2.43;}
<div class="how-to-buy">
<p>This collection includes nineteen tales of faeries and magic at Midwinter. Available Now online:</p>
<div class="ebook-links">
<a href=#>
<img class="logo1" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/amazon-logo_black-300x145.png" /></a>
<a href=#>
<img class="logo4" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/ibooks-300x108.png" /></a>
</div>
</div>
Hope this is the result you are looking for
Related
I am making a web-site. There is content part with specific width. Inside there are flex-boxes with image. The number of images may be different (not more than 5) and the width of each image must be calculated to fit them all.
The strange thing is that in FireFox this work fine, but in Chrome or Yandex.
Seem, that images don't auto-fit in flex-box, because of height: 400px; the width: 100% tries to correspond that 400px height.
Here is HTML and CSS parts:
HTML
<div class="article-images">
<img src="../images/newsImages/img_6_4.jpg" class="article-images-item" />
<img src="../images/newsImages/img_6_5.jpg" class="article-images-item" />
<img src="../images/newsImages/img_6_6.jpg" class="article-images-item" />
<img src="../images/newsImages/img_6_9.jpg" class="article-images-item" />
</div>
CSS
.article-images {
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 20px;
width: 100%
}
.article-images-item {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 2px;
cursor: pointer
}
How it should be (current in FireFox):
How it looks now (in Chrome or other browser)
The following example should help solve it (though we didn't use object-fit in this example).
You can optionally set it up without the image DIV's:
stack post
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
background-color: rgb(0,150,255);
align-items: stretch;
}
.flex-container > div {
background-color: #f1f1f1;
width: 200px; /*--control image size--*/
margin: 5px;
border: 2px solid #fff;
border-radius: 7px;
}
img {
width: 100%;
height:auto;
border-radius: 5px;
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
}
#outer {padding:2px;}
<div id="outer">
<div class="flex-container">
<div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=1"></div>
<div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=2"></div>
<div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=3"></div>
<div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=4"></div>
</div>
</div>
I have a grid of images that are spaced into columns dynamically using flex-wrap: wrap. However there is one problem, I don't know how to make the container scrollable because it has a dynamic height. I have searched for solutions to this problem but I don't really know how to adapt them for my use case.
This is my code:
.imagegrid {
display: flex;
width: 100%;
height: 100%;
background-color: var(--background);
}
.image-container {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 30px;
padding-right: 30px;
}
.image {
width: auto;
max-height: 270px;
margin-bottom: 10px;
cursor: pointer;
}
I want to make either the image-container or imagegrid scrollable on the y-axis.
This is the HTML, if needed:
<div class="imagegrid">
<div class="image-container">
<img class="image" src="image"/>
<img class="image" src="image2"/>
(multiple images)
</div>
</div>
The images are added dynamically from a database. I do not know what the height of the container will be.
In order for elements to scroll vertically you must do 2 things
Give them an explicit height that makes them have to scroll
Give them an overflow setting of auto or scroll
I've added a working example with both applied:
.imagegrid {
display: flex;
width: 100%;
height: 200px;
overflow: auto;
background-color: var(--background);
}
.image-container {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 30px;
padding-right: 30px;
}
.image {
width: auto;
max-height: 270px;
margin-bottom: 10px;
cursor: pointer;
}
<div class="imagegrid">
<div class="image-container">
<img class="image" src="https://source.unsplash.com/random/200x200" />
<img class="image" src="https://source.unsplash.com/random/250x250" /> (multiple images)
</div>
</div>
I'm trying to create simple page header with a logo on the left-hand side and links divided evenly on the right-hand side. Like this render from Adobe Xd presenting expected header design. To do this I have written this code (snippet is missing the image and is a bit too narrow for this margin):
header {
margin: 0 200px;
height: 75px;
border-bottom: #707070 solid 2px;
display: flex;
flex-direction: row;
}
header .logo {
flex-grow: 2;
flex-basis: 0;
padding: 5px 0;
}
header nav {
flex-grow: 1;
flex-basis: 0;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
}
header nav a {
align-self: flex-end;
}
<header>
<div class="logo">
<a href="home.html">
<img alt="Logo Hufca" src="logo_hufca_zlote.svg" />
</a>
</div>
<nav>
Działalność
Jednostki
Dokumenty
Kontakt
</nav>
</header>
This solution works as expected in certain cases on Chrome and Opera. The layout is correct after the first load of page (screenshot from Chrome after the first page load). It also scales adequately to viewport resizing. Then, after clicking some links, <nav> become narrower and flex is not flexible anymore - doesn't change size when viewport does (screenshot from Chrome after the bug occures).
On Firefox and Edge this solution doesn't work at all - bug occurs all the time.
You can test this page here. Even more confusing is fact that the footer (made with flexbox) works propoerly on the same page. How can I repair my code to make header looks as expected?
You are working with a static margin. Its better to use a relative CSS rule to achieve the space between content and borders. Also you dont need to set flex-grow & flex-basis.
But the main issue was that the img { height: 100% } caused that the img element rise to its full height. You have to give the header .logo a max-height attribute.
Also its better to achieve the space between the nav elements with padding.
Here is a possible solution:
header {
margin: 0 auto;
max-width: 90%;
height: 75px;
border-bottom: #707070 solid 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
header .logo {
padding: 5px 0;
height: 100%;
max-height: 65px;
}
img {
height: 100%;
}
header nav {
padding-bottom: 20px;
display: flex;
justify-content: space-between;
}
header nav a {
align-self: flex-end;
padding-right: 10px;
}
header nav a:last-child {
padding-right: 0;
}
<header>
<div class="logo">
<a href="home.html">
<img alt="Logo Hufca" src="https://wip.733mdh.pl/user/themes/motyw-hufca/images/logo_hufca_zlote.svg">
</a>
</div>
<nav>
Działalność
Jednostki
Dokumenty
Kontakt
</nav>
</header>
header {
height: 75px;
border-bottom: #707070 solid 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
header .logo {
flex-grow: 2;
flex-basis: auto;
padding: 5px 0;
}
header nav {
flex-grow: 1;
flex-basis: auto;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
}
header nav a {
align-self: flex-end;
}
<header>
<div class="logo">
<a href="home.html">
<img alt="Logo Hufca" src="https://picsum.photos/200/50" />
</a>
</div>
<nav>
Działalność
Jednostki
Dokumenty
Kontakt
</nav>
</header>
how can I make this container responsive so the text and the img automatically become block elements. I tried it out with flex direction but for someway it doesnt work. Can someone correct my code if necessary and suggest me a media query rule for the responsive design
<div class="top">
<h1>Welcome</h1>
<div class="portrait">
<img src="https://pixy.org/images/placeholder.png" alt="">
<h2>XXXXXXXXXX</h2>
</div>
</div>
.top h1{
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: black;
height: 20vw;
margin-top: 0;
font-size: 5vw;
color: white;
text-shadow: 5px 5px rgb(142, 135, 136);
}
.top img {
width: 20vw;
}
thanks in advance
I think this is what you are after. display: flex; is very powerful property and useful when it comes to take up rest of the space and centering.
Modification
here is a demo, I would not suggest this approach with using max-width as it's not "mobile-first". But if this is what you want for this project then ok.
.container {
display: flex;
flex-direction: row;
background-color: deepskyblue;
}
#img {
width: 140px;
height: 140px;
}
#text {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: deeppink;
min-height: 100px;
}
#media screen and (max-width: 700px) {
.container {
flex-direction: column;
}
#img {
width: 100%;
height: auto;
}
}
.container {
display: flex;
background-color: deepskyblue;
}
#img {
width: 140px;
height: 140px;
}
#text {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: deeppink;
}
<div class="container">
<img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />
<div id="text">text on the left, next to the img</div>
</div>
Ok, well so here it is if I understood well what you are trying to accomplish. Correct me or update your question if I am wrong!
#img{
width: 200px;
height: 150px;
float: left;
}
#text{
overflow: hidden;
}
<div class="container">
<img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
<div id="text">text on the left, next to the img</div>
</div>
I've developed the following layout using the Flexbox CSS model:
html {
box-sizing: border-box;
overflow-y: none;
}
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
#all {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: #03a9f4;
}
#app {
width: 500px;
background: #ffffff;
border: solid 6px yellow;
}
header {
display: flex;
justify-content: center;
align-items: center;
border: solid 4px blue;
}
#header-para-container {
flex: 1;
}
#header-image-container {
flex: 0.6;
background: #888;
}
#header-image-container > img {
display: block;
width: 100%;
height: auto;
}
section {
display: flex;
flex-wrap: wrap;
border: solid 4px tomato;
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 50%;
border: solid 4px green;
}
figure > img {
max-width: 80%;
height: auto;
}
<div id="all">
<div id="app-container">
<div id="app">
<header>
<div id="header-para-container">
<p>Hello, this is CSS flexbox layout. Thank you for visiting this page.</p>
</div>
<div id="header-image-container">
<img src="http://placekitten.com/g/300/300" />
</div>
</header>
<section id="grid-images">
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
<figure>
<img src="http://placekitten.com/g/300/300" />
</figure>
</section>
</div>
</div>
</div>
https://jsfiddle.net/petebere/fsLpw1vb/.
Would you know how to reduce responsively the height of the images and the main display element (in yellow frame) as the viewport height decreases?
The idea is that the element in yellow frame should be always fully visible and there should be no need for vertical scrolling.
At the moment when the viewport height drops, the height of the yellow container stays constant. This is probably because the browser wants to keep the sizes that I've applied to the container of the header image:
#header-image-container {
...
flex: 0.6;
...
}
and to the containers of the grid images:
figure {
...
flex-basis: 50%;
...
}
I've produced this graphic to show what I'm trying to achieve when the window height is reduced:
The images aren't scaling because they aren't bound by a fixed height on their immediate containers.
For example, the first image in the layout (in the header section), has neither a parent (.header-image-container) nor a grandparent (header) with a defined height. Here's the actual code:
header {
display: flex;
justify-content: center;
align-items: center;
border: solid 4px blue;
}
#header-image-container {
flex: 0.6;
background: #888;
}
With the code above, the image has no need to be responsive. There is no height confinement.
Try this instead:
header {
display: flex;
justify-content: center;
align-items: center;
border: solid 4px blue;
height: 20vh; /* NEW */
}
#header-image-container {
flex: 0.6;
background: #888;
height: 100%; /* NEW */
}
#header-image-container > img {
/* display: block; */
/* width: 100%; */
/* height: auto; */
height: 100%; /* NEW */
}
revised demo
The same concept above applies to the #grid-images section:
section {
display: flex;
flex-wrap: wrap;
border: solid 4px tomato;
height: 60vh; /* NEW */
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-basis: 50%;
border: solid 4px green;
height: 50%; /* NEW */
}
figure > img {
/* max-width: 80%; */
/* height: auto; */
height: 100%; /* NEW */
}
revised demo
Additional notes:
In your original code you're trying to make your images responsive with width: 100%; height: auto (in the header section) and max-width: 80%; height: auto (in the grid section). This set-up (using percentage widths) is more suited for horizontal screen re-sizing. Your question seeks vertical re-sizing, so use percentage heights instead.
In your original layout, you may have noticed that when you reduce the screen height, the layout disappears at the top of the screen, with no access via vertical scroll. This is a known issue with flexbox. The solution is to use margin: auto on the centered flex item, instead of justify-content: center; align-items: center on the flex container. Full details here: Can't scroll to top of flex item that is overflowing container