kazaq6 Posted July 18, 2018 Share Posted July 18, 2018 I'm having trouble using the w3-col feature to arrange these captioned pictures. I want to make the containers with less text match the height of the first container that has more type in it. At full screen everything displays correctly, but once the text on the first image takes an extra line, the rows below get all jumbled up. I don't want to use a table or cells because I want them to go down to 2 wide on small devices. Thanks in advance for any help. Heres the code; <!doctype html> <html> <head> <meta charset="utf-8"> <title>Red Stick Sports - Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-container w3-red w3-margin-bottom"> <h1>Our Services</h1> </div> <div class="w3-row"> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/br-blues-black-2b-jersey.jpg" style="width:100%"> <p>One color prints come out great with our design included pricing. </p> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/lsu-tiger-eye.jpg" style="width:100%"> <p>We are a licensed printer for LSU. </p> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/dream-logos-full.jpg" style="width:100%"> <p>4 Color Process prints can simulate photographs.</p> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/br-blues-black-2b-jersey.jpg" style="width:100%"> <div class="w3-container"> <p>One color prints come out great with our design included pricing. <b></b></p> </div> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom w3-border"> <div class="w3-container"> <img src="images/home/lsu-tiger-eye.jpg" style="width:100%"> <div class="w3-container"> <p>We are a licensed printer for LSU. </p> </div> </div> </div> <div class="w3-col s6 m4 l4 w3-margin-bottom"> <div class="w3-container"> <img src="images/home/dream-logos-full.jpg" style="width:100%"> <div class="w3-container"> <p>4 Color Process prints can simulate photographs.</p> </div> </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2018 Share Posted July 18, 2018 Use display: flex with a custom class, as it seems w3css doesn't provide class to do the same https://www.w3schools.com/code/tryit.asp?filename=FTEFHOI27J7C 1 Link to comment Share on other sites More sharing options...
kazaq6 Posted July 18, 2018 Author Share Posted July 18, 2018 Thank you! Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2018 Share Posted July 18, 2018 Just noticed a mistake, the css is using a .flex class it should be like this, corrected css https://www.w3schools.com/code/tryit.asp?filename=FTEKPYO1FKQ3 however if you prefer the original you can use it but just remove .w3-row.custom-flex.flex > .w3-col {flex: 1 0 290px;} as it is obsolete there is no .flex class element so its reverting to default setting for parent class styling display: flex; Link to comment Share on other sites More sharing options...
kazaq6 Posted July 18, 2018 Author Share Posted July 18, 2018 The one with the error actually acts more like what I was looking for. What made you choose 290px? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2018 Share Posted July 18, 2018 290px is smallest device width (320) minus 30px for 15px padding left and right. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now