Search the Community
Showing results for tags 'w3-row'.
Found 3 results
-
So, I have found using w3 CSS responsive to be brilliant for mobile. However, I just hit an issue where all is well on desktop Browsers (all the big names) but, although everything goes where it should initially on a mobile (Chrome, Android9, Samsung s8), the slideshow, when scrolled into view by the User, goes mostly out of view when the slide is auto-changed. This is an ugly demo of the issue: testmobile.html Has anyone seen this before? Is there an easy (and painless) fix?
-
Hello. Im convertig anold site to W3-css & started on one page.. (i'll update the other pages soon). http://sudoku.kwister.com/main?file=2020041310 The problem is, that the black menu at the top looks like 98% of the screen-width on a PCC / computer, & the yellow title above it, is 100% wide. HOWEVER, on the ipad - the black menu is 100% of the ipad width, but the yellow title, is OVER the width (making the ipad have a left/right scrollbar - or able to move sideways). When i first tried to upgrade/fix this page (or page template), I had the w3-row and w3-mobile on the 3 div areas (menu, main content & right-text). According to the w3-css website, The sections should be above one another on small (ipad) screens. Though the main Sudoku board overlapped the right-side text & didnt stack.. Am i forgetting one essential piece of code ?
-
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>
