I have a container that has three images. Two on the left side and one on the right side on the mobile layout. When I hit a larger breakpoint, I want the image in the middle to be centered. I have been trying to do solve this using flexbox but I'm not able to center the image. I know it can be done using position: absolute but I was wondering if there's a way to do it with flexbox.
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.left {
justify-content: space-between;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
Add margin:0 auto; to .logo in large screen sizes.
#media (min-width: 640px){
.logo{
margin:0 auto;
}
}
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.logo{
margin:0 auto;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
justify-content: space-between; in flexbox make the first item is on the start line, last item on the end line so that not what you want.
You have two options :
1- you can use margin: 0 auto for the .logo and it will ok.
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.logo{
margin:0 auto;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
2- you can give .right{ flex-grow: 1;} on the bigger screen so the image on left will be already centered and on smaller device just remove it.
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.right {
flex-grow: 1;
text-align: right;
}
.left{
justify-content: space-between;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
Related
I'm 99% sure about this but thought i'd ask to see if anyone knew of any clever solutions.
Basically I wish to place an image in a 1/1 aspect containing element, and then for that image to be as as as it possibly can be, eg, landscape images always touch the left and right sides and portrait ones touch the top and bottom.
I then want a line of caption text underneath the image.
My question is, is there any way to get that size of image but without (for landscape images) the large gap between the photo and the caption?
My example image below shows the problem (please note the image is not full left to right edge here like I want).
Anyone know of any clever options to achieve this?
<figure class="photo-1 landscape">
<div class="image-wrapper gallery">
<a href="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" data-pswp-width="4032" data-pswp-height="3024" target="_blank">
<img src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_m.jpg">
</a>
</div>
<figcaption>Hersheypark</figcaption>
</figure>
figure {
display: flex;
flex-direction: column;
gap: 0.5rem;
.image-wrapper {
aspect-ratio: 1/1;
}
a {
display: block;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
&.landscape {
a {
min-width: 100%;
}
img {
width: 100%;
}
}
&.portrait {
a {
min-height: 100%;
}
img {
height: 100%;
}
}
figcaption {
text-align: center;
color: hsl(var(--color-secondary));
font-size: var(--fs--1);
}
}
This is what I got so far.
body {
background-color: #F8F9F9;
}
.container {
display: flex;
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 0;
flex-grow: 1;
gap: 10px;
}
.image {
display: flex;
align-items: center;
background-color: #ffffff;
overflow: hidden;
}
.image.hor {
flex-direction: row;
}
.image.ver {
flex-direction: column;
aspect-ratio: 1/1;
}
.image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
.caption {
padding: 5px 10px;
font-size: 14px;
text-align: center;
background-color: #ffffff;
}
<div class="container">
<div class="card">
<div class="image hor">
<img src="https://dummyimage.com/100x50/000/fff" />
</div>
<div class="caption">
Landscape image (small)
</div>
</div>
<div class="card">
<div class="image hor">
<img src="https://dummyimage.com/1000x500/000/fff" />
</div>
<div class="caption">
Landscape image (large)
</div>
</div>
<div class="card">
<div class="image ver">
<img src="https://dummyimage.com/50x100/000/fff" />
</div>
<div class="caption">
Portrait image (small)
</div>
</div>
<div class="card">
<div class="image ver">
<img src="https://dummyimage.com/500x1000/000/fff" />
</div>
<div class="caption">
Portrait image (large)
</div>
</div>
</div>
i'm working now with media query and once i reach the breakpoint of 768px the text goes
all below the images, not following them.
I would like the text to follow the images and to be under each one once it reach the 768px breakpoint.
any suggestion to avoid this problem?
thanks.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 200px;
grid-gap: 20px;
justify-content: center;
align-content: center;
}
#media (max-width: 768px) {
/* navbar */
* {
margin: 0;
box-sizing: border-box;
}
.nav-links, .search{
display: none;
}
.logo {
height: 64px;
width: 126px;
filter: invert(100%);
padding: 1px;
}
/* contenuto1 */
.grid {
display: flex;
flex-wrap: wrap;
margin-top: 100px;
grid-gap: 150px;
}
<div class="titolo-grid">
<h2>In evidenza</h2>
</div>
<div class="grid-container">
<div class="grid">
<img src="1w.webp" class="img"/>
<img src="2w.webp" class="img"/>
<img src="3w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
<figcaption class="caption">Maglieria</figcaption>
<figcaption class="caption">Scarpe Made In Italy</figcaption>
</div>
</div>
I suggest you do not use a grid unless you know how to manipulate it. I suggest you use display flex because it's easier to manipulate and more simple.
and to put text under each image, you must understand the importance of HTML structure for that. so put each image with its text in a container, then style them according to that.
I used display flex here:
img {
width: 100%;
min-width: 300px;
height: 100%;
object-fit: contain;
}
.grid {
display: flex;
/* grid-template-columns: repeat(3, 1fr); */
margin-top: 200px;
grid-gap: 20px;
justify-content: center;
align-content: center;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 768px) {
/* navbar */
* {
margin: 0;
box-sizing: border-box;
}
.nav-links, .search{
display: none;
}
.logo {
height: 64px;
width: 126px;
filter: invert(100%);
padding: 1px;
}
.grid {
flex-direction: column;
}
img {
width: 80%;
min-width: 200px;
}
/* contenuto1 */
/* .grid {
display: flex;
flex-wrap: wrap;
margin-top: 100px;
grid-gap: 150px;
} */
}
<div class="titolo-grid">
<h2>In evidenza</h2>
</div>
<div class="grid-container">
<div class="grid">
<div class="img1 container" >
<img src="1w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
</div>
<div class="img2 container" >
<img src="2w.webp" class="img"/>
<figcaption class="caption">Maglieria</figcaption>
</div>
<div class="img3 container" >
<img src="3w.webp" class="img"/>
<figcaption class="caption">Scarpe Made In Italy</figcaption>
</div>
</div>
</div>
Put <img> and <figcaption> inside <figure>:
<figure>
<img src="1w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
</figure>
<figure>
<img src="2w.webp" class="img"/>
<figcaption class="caption">Maglieria</figcaption>
</figure>
Try this:
.grid-container {
display: flex;
flex-wrap: wrap;
flex-direction:row;
margin-top: 100px;
}
img {
width: 100%;
object-fit: contain;
}
.grid{
width:31%;
margin:1%;
}
#media (max-width: 768px) {
/* navbar */
* {
margin: 0;
box-sizing: border-box;
}
.nav-links, .search{
display: none;
}
.logo {
height: 64px;
width: 126px;
filter: invert(100%);
padding: 1px;
}
.grid{
width:100%;
}
.caption{
margin:10px auto 25px;
}
}
<div class="titolo-grid">
<h2>In evidenza</h2>
</div>
<div class="grid-container">
<div class="grid">
<img src="1w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
</div>
<div class="grid">
<img src="2w.webp" class="img"/>
<figcaption class="caption">Maglieria</figcaption>
</div>
<div class="grid">
<img src="3w.webp" class="img"/>
<figcaption class="caption">Scarpe Made In Italy</figcaption>
</div>
</div>
you need to put img and figcaption inside the grid element and use Flex instead of Grid some codes:
I have issues with a layout where I want to center the last two elements on a row. First I tried with grid and couldn't find any proper solution so I found a way to solve it with "flex-wrap" and it looks pretty good.
The issue I'm facing now is with the gap/margin. I can't find any good solution while I'm setting the width to 33,33%.
Is there any other good way to solve this? I'm kind of stuck and have been looking at this for hours now :) (see layout attached image)
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
}
#media only screen and (min-width: 640px) {
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: row
}
}
.item {
width: 100%;
background: teal;
color: white;
border-radius: 10px;
text-align: center;
}
#media only screen and (min-width: 640px) {
.item {
width: 33.33%;
}
}
<div id="container">
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
</div>;
You can use the gap parameter, see the example below.
Update:
Solution 1
Stretched Last element
#container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px;
}
.item {
width: 100%;
background: teal;
color: white;
border-radius: 10px;
text-align: center;
}
/* Start Media Query*/
#media only screen and (min-width: 640px) {
#container {
display: flex;
justify-content: center;
flex-direction: row;
}
.item {
flex: 1 1 30%;
}
} /* End Media Query*/
<div id="container">
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
</div>
Solution 2
Not stretched last element
#container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px;
}
.item {
width: 100%;
background: teal;
color: white;
border-radius: 10px;
text-align: center;
}
/* Start Media Query*/
#media only screen and (min-width: 640px) {
#container {
display: flex;
justify-content: center;
flex-direction: row;
}
.item {
flex: 0 0 calc(33.33% - 15px);
}
} /* End Media Query*/
<div id="container">
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
<div class="item">
<p>Item</p>
</div>
</div>
I am using bootstrap, so in laptop and desktop div working fine like:
but in Ipad or mobile, it became like:
HTML code:
<div class="thumbnail_container">
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>First Div Test</h3>
<p>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>Second Div Test</h3>
<p>
</p>
</div>
</div>
</div>
</div>
Here is CSS code to manage div display:
.thumbnail_container .thumbnail
{
border-color: white;
color: black;
width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
border-color: lightseagreen;
}
.thumbnail_container
{
text-align: center;
margin-top: 30px;
}
.thumbnail span
{
left:0; right:0;
margin: auto;
}
.caption > p
{
color: black;
width: 100%;
margin-top: 0px;
text-align: justify;
}
How to make all div height same in any screen resolution?
change class="thumbnail_container" to class="thumbnail_container equal"
and then copy the following code and paste it
/*make thumbnail div height equal */
#media screen and (min-width: 768px)
{
.equal, .equal > div[class*='col-']
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
}
working fiddle
Just give display: flex; to .thumbnail_container and height: 100%; to .thumbnail will make equal height.
Working Fiddle
I'm exploring responsive web design and i've encountered a stumbling block.
I have a logo placed at the top of my fluid grid responsive site and I am trying to center the image within the div, not centering the div itself. I'm tring to do this because in smartphone and tablet view, the logo looks good (no need to be centered as it takes up the entire area) but in desktop view the logo is left aligned.
Just want logo to be centered with the div.
html:
<div class="gridContainer clearfix">
<div id="logo">
<img src="images/logo.gif" alt="logo" class="center">
</div>
css:
img.center {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#logo {
clear: both;
margin: auto;
max-width: 100%;
display:inline-block;
text-align:center;
I also have a global img styling in css:
img {
padding: 10px;
float: left;
text-align: center;
}
I've tried so many online solutions, but no luck. Thanks for any help.
You want to add text-align: center; to your gridContainer class. E.g.,
.gridContainer {
text-align: center;
}
<div class="gridContainer clearfix">
<div id="logo">
<img src="..." alt="logo" class="center"/>
</div>
</div>
If .gridContainer contains other children that should not be centered, you can add a wrapper <div> for the logo with a class containing text-align: center;. E.g.,
.gridCenter {
text-align: center;
}
<div class="gridContainer clearfix">
<div class="gridCenter">
<div id="logo">
<img src="..." alt="logo" class="center"/>
</div>
</div>
...
</div>
Full example:
#img {
padding: 10px;
float: left;
text-align: center;
}
#img.center {
display: inline-block;
/*margin-left: auto;*/ /* <-- Not needed. */
/*margin-right: auto;*/ /* <-- Not needed. */
}
#logo {
clear: both;
/*margin: auto;*/ /* <-- Not needed. */
max-width: 100%;
display: inline-block;
text-align: center;
}
.gridContainer {
text-align: center;
}
/* Extra styles to display example. */
.gridContainer {
background: #999;
}
#logo {
background: #0F0;
}
#img {
background: #F00;
}
<div class="gridContainer clearfix">
<div id="logo">
<span id="img" class="center">Logo</span>
</div>
</div>