sawozny2
-
Posts
4 -
Joined
-
Last visited
sawozny2's Achievements
Newbie (1/7)
0
Reputation
-
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
-
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
-
FFS... I forgot to include <meta name="viewport" content="width=device-width, initial-scale=1"> in the header of the page that was giving me trouble. I couldn't figure out why some pages worked in mobile and some didn't until I started doing a line by line comparison and found this. Sorry for the bother. If anyone comes across this in the future where it all looks great on a desktop browser at various page sizes, but doesn't render right in mobile, make sure you set your viewport. 😀😀😀 Scott
-
sawozny2 joined the community
-
I'm using w3.css with my own custom styles and during development all the responsive small / medium / large / mobile stuff works great as I resize the browser on my desktop copy of Firefox (using whatismyviewport.com to confirm the display size in DIPs), but when I load the page on my phone, even though whatismyviewport.com shows the viewport size in device independent pixels (360px wide), the page shows in "medium" format (~900px wide based upon size of window vs fixed size elements in the page) but if it was using raw pixels it should show in "large" format as the device's display is 1440 px wide. Just to eliminate my specific device as a potential issue, I loaded the page in desktop Firefox and in the developer tools, I changed the device to Galaxy S9 (DIP 360x740) and it also (incorrectly) loads like it was on a "medium" device. So my question is if there's any known issues with w3.css sites displaying properly on mobile phones (i.e. causing the "correct" device independent pixels values to be used) and, if so, is there anything I can do to fix my site. This forum, for example, displays exactly as it should on both browser and phone so it has to be possible. I'm just trying to figure out what I'm missing. Here is the HTML and my custom style sheet. Any suggestions what I can do to get this site to render properly on mobile browsers? Thanks, Scott <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="styles/my-styles.css"> <title>Login Page</title> <meta name="description" content="Enter your credentials to access your data."> </head> <body> <!-- Large and medium display, sticky NavBar --> <div class="w3-top w3-hide-small"> <!-- Separate container for reasons I don't fully understand. --> <div class="w3-bar w3-black my-text-light-spring-green"> <a href="/" class="w3-bar-item w3-button ">Home</a> <a href="/points" class="w3-bar-item w3-button ">Points</a> <a href="/buy" class="w3-bar-item w3-button ">Buy</a> <a href="/codes" class="w3-bar-item w3-button w3-hide-medium ">Codes</a> <a href="/transaction-history" class="w3-bar-item w3-button w3-hide-medium ">Transaction History</a> <div class="w3-dropdown-hover w3-hide-large"> <span class="w3-button">•••</span> <div class="w3-dropdown-content w3-bar-block w3-card w3-black my-text-light-spring-green"> <a href="/codes" class="w3-bar-item w3-button ">Codes</a> <a href="/transaction-history" class="w3-bar-item w3-button ">Transaction History</a> </div> </div> <div class="w3-right"> <a href="/profile" class="w3-bar-item w3-button " >Profile</a> <a href="/login" class="w3-bar-item w3-button my-light-spring-green w3-text-black ">Login</a> </div> </div> </div> <!-- Large and medium non-sticky welcome bar --> <div class="w3-bar w3-black my-text-light-spring-green w3-hide-small" style="padding-top:4px"> <span class="w3-bar-item w3-right">Welcome, Guest!</span> </div> <!-- Small display, disappearing NavBar --> <div id="smallnavbar" class="w3-top w3-hide-large w3-hide-medium" style="transition:top 0.3s"> <div class="w3-bar w3-black my-text-light-spring-green"> <span class="w3-dropdown-click w3-button w3-left" onclick="showDropdown()">☰</span> <div id="smallDropdown" style="z-index:-1" class="w3-dropdown-content w3-bar-block w3-card w3-black my-text-light-spring-green"> <div><br><br></div> <span class="w3-bar-item">Welcome, Guest!</span> <a href="/" class="w3-bar-item w3-button ">Home</a> <a href="/points" class="w3-bar-item w3-button ">Points</a> <a href="/buy" class="w3-bar-item w3-button ">Buy</a> <a href="/codes" class="w3-bar-item w3-button ">Codes</a> <a href="/transaction-history" class="w3-bar-item w3-button ">Transaction History</a> <a href="/profile" class="w3-bar-item w3-button ">Profile</a> </div> <a href="/login" class="w3-bar-item w3-button w3-right my-light-spring-green w3-text-black ">Login</a> </div> </div> <script> function showDropdown() { var x = document.getElementById("smallDropdown"); if (x.className.indexOf("w3-show") == -1 ) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("smallnavbar").style.top = "0"; } else { document.getElementById("smallnavbar").style.top = "-40px"; } prevScrollpos = currentScrollPos; } </script> <div class="my-600px-centered w3-card-4 w3-mobile"> <h1 class="w3-container my-spring-green">Log In</h1> <p>Enter your username and password. Both fields are required.</p> <p><span class="my-error"></span></p> <form class="w3-container" method="POST" action=""> <input id="redirectTo" name="redirectTo" type="hidden" value="/"> <div> <label for="userEmail">Email Address</label> <input required type="email" id="userEmail" name="userEmail" class="w3-input w3-border" value="" placeholder="user@example.com"> <span class="my-error"></span> </div> <div> <label for="password">Password</label> <input required type="password" id="password" name="password" class="w3-input w3-border" value="" placeholder="Enter your password here" minlength="8" > <span class="my-error"></span> </div> <div> <input type="submit" value="Submit"> <input type="checkbox" id="rememberMe" name="rememberMe" > <label for="rememberMe">Keep Me Logged In</label> </div> </form> <div class="w3-container my-dark-spring-green"> <p>Need an account? <a href="register">Register here.</a></p> <p>Forgot your password? <a href="password-reset">Reset it here.</a></p> </div> </div> </body> </html> And the CSS... /* Custom styles for my site */ body{padding-top:27px} /* So the nav bar doesn't cover the first line of text */ .my-600px-centered{width:600px;margin-left:auto;margin-right:auto} .my-error{color:red;background-color:white} .my-spring-green,.my-hover-spring-green:hover{color:#000!important;background-color:#00ff80!important} .my-light-spring-green,.my-hover-light-spring-green:hover{color:#000!important;background-color:#80ffc0!important} .my-dark-spring-green,.my-hover-dark-spring-green:hover{color:#fff!important;background-color:#008040!important} .my-text-spring-green,.my-hover-text-spring-green:hover{color:#00ff80!important} .my-text-light-spring-green,.my-hover-text-light-spring-green:hover{color:#80ffc0!important} .my-text-dark-spring-green,.my-hover-text-dark-spring-green:hover{color:#008040!important} .my-border-spring-green,.my-hover-border-spring-green:hover{border-color:#00ff80!important} .my-border-light-spring-green,.my-hover-border-light-spring-green:hover{border-color:#80ffc0!important} .my-border-dark-spring-green,.my-hover-border-dark-spring-green:hover{border-color:#008040!important}