- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 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.
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
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.
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
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;
}
Perfect.
Thank you very much.
Cheers
Ron