sawozny2 Posted February 1, 2021 Share Posted February 1, 2021 I’m trying to make the w3.css fluid gird demonstrated here: https://www.w3schools.com/w3css/w3css_grid.asp use equal height columns as demonstrated here: https://www.w3schools.com/w3css/w3css_layout.asp but I can’t seem to combine the concepts. When I use the “layout” classes with the “grid” classes the columns stay uneven like the “grid” classes are overriding the “layout” classes. Are they not compatible or am I doing something wrong? Here’s the code I’m working with. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <title>Home Page</title> <meta name="description" content="This is the home page."> </head> <body> <div class="w3-row"> <div class="w3-col m6 l4 w3-blue w3-card-4 w3-container"> <h1 class="w3-center">Lorem ipsum</h1> <p>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="w3-col m6 l4 w3-red w3-card-4 w3-container"> <p>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="w3-row"> <div class="w3-col m6 l4 w3-blue w3-card-4 w3-container"> <h1 class="w3-center">Lorem ipsum</h1> <p>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="w3-col m6 l4 w3-red w3-card-4 w3-container"> <p>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html> It’s supposed to be 1/3 and 1/3 on large screens, half and half on medium screens and a single stacked column on small screens, all of which works, but the differing column heights is throwing the whole look, off. Does anyone have any suggestions on how I can fix this? Thanks, Scott Link to comment Share on other sites More sharing options...
dsonesuk Posted February 1, 2021 Share Posted February 1, 2021 Are you using new classes as described in listing at bottom? For deprecated classes. Link to comment Share on other sites More sharing options...
sawozny2 Posted February 1, 2021 Author Share Posted February 1, 2021 Do you mean the listing at the bottom of https://www.w3schools.com/w3css/w3css_layout.asp? The ones that start with w3-layout? Those classes are deprecated and not even in the currently published version of w3.css, so no I'm not using them. I'm actually surprised they still mention them on that page. When I try to use the current classes that start with w3-cell alongside the fluid grid classes that start with w3-row and w3-col the grid functions, but only with uneven column heights which is what I'm trying to use the w3-cell classes to smooth (to no effect). What I'm looking for is a "best of both worlds" solution, but it either can't be done with w3.css classes or I'm doing it wrong. Any idea how I can accomplish this? Thanks, Scott 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