Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adaptive images

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #294349
    Bigg
    Participant

    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.

    #294354
    Paulie_D
    Member

    Try making a demo in Codepen.io rather thnan posting some small snippets of code.

    #294360
    Bigg
    Participant

    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.

    #294384
    Bigg
    Participant
    #294619
    lerougeliet
    Participant

    Use width: 33% or flexboxes

    #295237
    JeroenR
    Participant

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.