I am trying to display some text below the two pictures.
Below the closing divs to be exact. The text is incorrectly displayed on the side of the image.
What am I doing wrong?
It's my first time posting here in a long time so I apologize for any posting mistakes.
/* Helper classes */
.container {
max-width: 1400px;
margin: 0 auto;
width: 90%;
}
.my-sec-1-mt {
margin-top: 4rem;
}
.my-sec-2-mt {
margin-top: 1.8rem;
}
/* Services section */
.rmi-services_services-wrapper display: flex;
flex-direction: column;
gap: 1.8rem;
.rmi-services__service-gallery {
width: 100%;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.rmi-services__service-gallery>.rmi-services__service-visual {
display: flex;
aspect-ratio: 1;
border-radius: 0.5rem;
overflow: hidden;
}
.rmi-services__service-gallery>.rmi-services__service-visual picture {
height: 100%;
}
.rmi-services__service-gallery>.rmi-services__service-visual img {
height: 100%;
object-fit: cover;
object-position: center;
}
<section class="rmi-services my-sec-1-mt">
<div class="container">
<div class="rmi-services__services-wrapper my-sec-2-mt">
<div class="rmi-services__service">
<div class="rmi-services__service-gallery">
<div class="rmi-services__service-visual curve-border">
<picture>
<source srcset="{% static 'image_location" type="image/webp">
<img loading="lazy" class="img-left" src="{% static 'image_location' %}" alt="">
</picture>
</div>
<div class="rmi-services__service-visual curve-border">
<picture>
<source srcset="{% static 'image_location" type="image/webp">
<img loading="lazy" src="{% static 'image_location' %}" alt="">
</picture>
</div>
</div>
</div>
</div>
</div>
</section>
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 want to make a small flexbox gallery of images with inconsistent height.
Desired result using grid:
Current result with flexbox:
.
This content belongs to a course, but I want to do that part with flexbox, as a learning method
container {
width: 90%;
overflow: hidden;
margin: 0 auto;
max-width: 1200px;
padding: 80px 0;
}
.projects {
background-color: #f2f2f2;
overflow: hidden;
margin-bottom: 500px;
}
.projects__grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
height: 550px;
background-color: aqua;
}
.projects__item {
width: 32.8%;
height: 270px;
}
.projects__item--first {
height: 550px;
}
.projects__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
<section class="projects">
<div class="container">
<h2 class="subtitle">mis proyectos</h2>
<div class="projects__grid">
<article class="projects__item projects__item--first">
<img src="assets/img1.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img2.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img3.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img4.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img5.jpg" alt="" class="projects__img">
</article>
</div>
</div>
</section>
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 want to fix div width (image) and get scroll-bar. But the more add 'div', the smaller width of div in wrapper div area. It doesn't appear scroll-bar.
This is image-wrapper below.
<div className="image-list-wrapper">{imageList}</div>
{imageList} are added by clicking button with 'div'
let imageList;
if(images){
imageList = images
.map((image, i) => {
return(
<div key={i} className="image-list-item">
<img className="image-resize" src={`http://localhost:5000`+image}/>
</div>
)
})
}
and CSS (SCSS)
.image-list-wrapper {
margin: auto;
margin-top: 1.5rem;
width: 95%;
height: 12rem;
border: 1px solid #bcbaba;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
}
.image-list-item {
float: left;
width: 9rem;
height: 9rem;
margin: 0.5rem;
margin-top: -0.5rem;
}
.image-resize {
width: 100px;
height: 160px;
}
I got result below (screenshot)(please ignore other buttons.)
screen shot
screen shot2
The more images, the smaller images.
I want scroll-bar and fixed width of div items in wrapper div.
Your code will generate something like this:
<div class="image-list-wrapper">
<div key="0" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="1" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="2" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="3" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="4" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="5" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
<div key="6" class="image-list-item">
<img class="image-resize" src="https://via.placeholder.com/200x160">
</div>
</div>
and you should remove float left because you either use floated elements or you use flexbox.
.image-list-wrapper {
margin: auto;
margin-top: 1.5rem;
width: 95%;
height: 12rem;
border: 1px solid #bcbaba;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
}
.image-list-item {
width: 9rem;
height: 9rem;
margin: 0.5rem;
margin-top: -0.5rem;
}
.image-resize {
width: 100px;
height: 160px;
}
which results into this: Demo here
AI want to put an image and its caption into one flex-item and have several such flex-items in one flex-container. I want the image to be above its caption. But what happens is that each caption is beside its image. How do I get them one above the other?
I tried putting the captions into another flex-container below the images. But when the screen size is less wide, the images stack, then the captions stack instead of being image, then its caption, image, then its caption.
<div class="flex-item-popup" id="popup">
<div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
<h2></h2>
<div class='text'></div>
<div class="videos"></div>
<div class="flex-container images"></div>
<div class="flex-container captions"></div>
</div>
css:
#popup {
width: 90%;
height: auto;
padding: 20px;
border-radius: 10px;
background-color: black;
color: white;
}
#popup .close {
/*position: absolute;
right: 10px;
top: 10px;*/
float: right;
color: white;
opacity: 1;
}
#popup .close:hover {
opacity: .7 !important;
}
.images, .captions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.images {
margin-top: 20px;
}
.images .flex-item, .captions .flex-item {
display: flex;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}
Look into <figure> and <figcaption> HTML5 tags. I am pretty certain that is going to help you and it is what you are looking for.
Here is updated fiddle link.
And the SO code snippet here...
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
}
.flex-item {
/*width: 350px;
height: null;*/
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
justify-content: flex-start;
display: flex;
padding-left: 20px;
}
.flex-item img {
cursor: pointer;
}
<div class="flex-container images">
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/grads.jpg" />
<!--<div style="clear: both;"></div>-->
<figcaption>Our grads.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/building.jpg" />
<figcaption>A building</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/campus.jpg" />
<figcaption>The campus.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/trio.jpg" />
<figcaption>Three people</figcaption>
</figure>
</div>
</div>
Hope this helps