Forums

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

Home Forums CSS FLEX WRAP (making it Work)

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #256546
    VK4KBG
    Participant

    Good Evening,
    I have a website the uses a lot of images and I am trying to get them to function correctly, here are my issues:
    1) I have to make the text below each image the same size to have the images align correctly.
    2) I need to create a horizontal margin between the rows.
    https://www.bwf.com.au

    Will Flex Wrap sort this out, if so how is it deployed.

    Any assistance or guidance much appreciated.

    Cheers
    Ron

    #256547
    Paulie_D
    Moderator

    Essentially, NO…flex-wrap won’t help…the content is already wrapping by itself.

    You’re not actually using rows as such, just one div which wraps into “rows” becuas each item is basically 1/3 wide.

    If you want spacing between each “row” you can add bottom margin to your ..w3-row-padding class.

    This, however, will not make all your internal .w3-card-4 divs the same height.

    However, if you add display:flex and flex-wrap:wrap to your .w3-row-padding class and THEN add height:100% to.w3-card-4` it starts to look a lot better.

    Image link

    #256551
    VK4KBG
    Participant

    Thank you for your reply,
    I added the following, the result has removed the vertical spacing
    Clearly I have done something wrong.

    .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.display:flex,.w3-row-padding> .flex-wrap:wrap,.w3-row-padding>.w3-col{padding:0 8px}

    .w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); height:100%}

    Regards
    Ron

    #256564
    Paulie_D
    Moderator

    You haven’t added any bottom margin as I suggested.

    Perhaps

    .w3-row-padding, .w3-row-padding>.w3-half, .w3-row-padding>.w3-third, .w3-row-padding>.w3-twothird, .w3-row-padding>.w3-threequarter, .w3-row-padding>.w3-quarter, .w3-row-padding>.w3-col {
        padding: 0 8px;
        margin-bottom: 1em;
    }
    
    #256596
    VK4KBG
    Participant

    Perfect.
    Thank you very much.
    Cheers
    Ron

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