- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello dear members, please help me with next stuff. I’m practicing with html and css now, and canot understand how to make adaptive images in #id.
I have 6 same images, with text on em (
)
[code]
<
div id=”gallery”>
<
div class=”container”>
<div class="good-images some-image">
<p class="text">Some info</p>
[/code]
.good-images {
width: 300px;
height: 300px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
float: left;
box-sizing: border-box;
padding: 40px 10px 20px;
box-shadow: 0px 3px 3px 0px #212121;
background-blend-mode: multiply;
}
When you minimize browser this 6 images stand in one column (each ofter each). Im asking for help. It will be great to make 3 images on the top and 3 images after. With other images under the header iv made next code -.menu {
text-align: center; and it works. But with my first question not.
Try making a demo in Codepen.io rather thnan posting some small snippets of code.
https://codepen.io/Biggis/pen/dybMbjG
Im tyring to make images with center align and (three pictures) in a row and three pictures below them.
Use width: 33% or flexboxes
Something like this: https://codepen.io/jeroenreijs/pen/BaBwrjr
You had a lot of div closing tags. So the good-images divs weren’t all children of your container. I guess that is what you intended to have.
In this example I used flexbox, set the basis to 33.3333% and subtracted the margin to make them fit.