Jump to content

Search the Community

Showing results for tags 'Responsive'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. Hello, I'm pretty new to CSS (still basic in HTML too, learned it 20 years ago and didn't use it much) and I'm trying to figure out if I can make my responsive sidebar sticky at top position when scrolled down (while the responsive action moves the sidebar to the top). Best example would be : https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp I used this how to. It's exactly the same CSS, no modification except for colors. If you resize the screen, the sidebar moves to the top which is what I want. But it doesn't "stick" there (on mobile and PC). I tried multiple ways of adding a sticky class with Javascript (window.onscroll which works really well for a Header div or top navbar div) or without Javascript. It seems that I can't do it. I must really be missing something. As an additional thing, I would like to have a sticky header (top container) added to that. So I get a full frame (yeah I used to work with frames back in the time) at the top containing a logo on the left and some text on the right (would probably be ugly on mobile though, unless I can make it responsive to reduce the logo size and text format / hide text). The top container should not be over/under the sidebar when the sidebar moves to the top. The sidebar should be below the top container and be sticky. The top container on smaller screen does not have to be sticky. That would be amazing but it's not a top priority for now. Thanks to anyone that can help!
  2. I have a fixed menu with a centered logo, left and right menu items. My float right menu items are showing beside the hamburger menu on responsive/mobile settings. The menu uses float: right for positioning the hamburger menu and the menu items. <div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; background-color: #f9f7f7; overflow: hidden; text-transform: uppercase; letter-spacing: 2px; border-bottom-style: solid; border-width: 2px; } .topnav a { float: left; display: block; color: #000000; text-align: center; padding: 14px 24px 12px 24px; text-decoration: none; font-size: 13px; font-weight: 900; font-style: normal; } .topnav a:hover { padding: 12px 22px 10px 22px; border-style: solid; border-width: 2px; border-radius: 50%; color: #101010; } .topnav .icon {display: none;} @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } } @media screen and (max-width: 600px) { .topnav-right { background-color: red; float: none; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } }
  3. 0 I do not know how to make cell phone browsers choose the smaller image, and the laptops/desktops choose the bigger image, while their resolutions are the same. I have the following script: <img sizes="(max-width: 479px) 479px, (max-width: 991px) 991px, 1400px" srcset="media/img/small.webp 479w, media/img/medium.webp 991w, media/img/big.webp 1400w" src="media/img/default.png"> From the above script, when the cell phone's resolution is, let's say 1080 x 1920 pixels, then the browser will choose big.webp. How to make the cell phone's browser choose small.webp? Thank you
  4. Hello! I'm currently working on the error and success pages that will display after you fill out a contact form. I styled for mobile first so there's no media query for that, but there's a media query for desktop at Line 56. For some reason the desktop styles are overriding the mobile ones, when I inspect on google it's not showing the mobile styles at all. Thankful for any help in advance. https://codepen.io/danajcarroll/pen/OJXdmVO
  5. Hello, I have been using W3 tutorials to create custom code elements on my weebly website. Lately I have been having issues with a code I created from two separate tutorials: image roll over and responsive size. The code is situated within a greater grid created with weebly's building tools. Image rollover and responsive size work in W3's try it editor, but on my website only the rollover works. On a full size window everything looks just fine (the bottom left is the custom coded element) but a slighter smaller window results in a slide bar to view the full image, because it will not scale down. On a phone-scaled window, the opposite happens and it doesn't scale up, appearing significantly smaller. Any help would be much appreciated!!! I have included images and the latest code I've tried to show what's happening. Thank you!!!!! <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img{ width: 100%; height: auto; } .box{ width: 100%; height: auto; position: relative; display: inline-block; margin: 10px 0px 10px 0px; } .box .img-top { width: 100%; height: auto; display: none; position: absolute; top: 0; left: 0; z-index: 0; } .box:hover .img-top { display: inline; } </style> </head> <body> <div class="box"> <img src="https://drive.google.com/thumbnail?id=1NJjBTmUClAxB3vqIDrDKzFTAF_HFqzHI" alt="Card Front" width="720" height= "720"> <img src="https://drive.google.com/thumbnail?id=1XNQ_ARudR0M_hEuB3ErCyxDhHxSGKPMo" class="img-top" alt="box Front"width="720" height= "720"> </div> </body> </html>
  6. Noob here. I have been playing around with W3.css, in particular the w3-row-padding, however I would like to set up five columns, with some padding. Can anyone advise me how I might go about this (I'm guessing it will involve nesting some containers?) Many thanks.
  7. I'm trying to set up a template for a website, with a responsive top border with dropdowns in the navigation bar. I thought I had it all working at one time, but have gone back to previous files to no avail. The menu is responsive, and goes down into a hamburger icon, but clicking on the hamburger icon does nothing. I'm trying to do this without using too many external files. I think the problem must be in the javascript function combined with the media queries, but I haven't been able to see the problem. I used the W3Schools responsive navbar with dropdowns, from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown as a basis for this. The files I have are index.htm, a top border file, top.htm in the folder _borders, and 2 css files in a css folder: mystyles.css and topnav.css. This is the basic code from index.htm. I excluded site-identifying code and content. I've attached the other 3 files - didn't know how to paste them here separately. In the top.htm and index.htm I've commented out references to the mystyles.css file and it doesn't make any difference. I'm using Brackets for this, and using Live Preview. If I just open the index file directly in Chrome or Firefox, there is no formatting, no nav bar or menu. But it looks just lovely in the Brackets Live Preview (other than the hamburger icon not responding. With my working website, I can open the index file in Chrome or Firefox and all is good. If someone can provide some direction I'd really appreciate it! <!DOCTYPE html> <html lang="en-us"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="author" content="USTaxTips.net"/> <link rel="stylesheet" href="../css/mystyles.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> <div w3-include-html="_borders/top.htm"></div> <script> includeHTML(); </script> <div id="container"> </div> </body> </html> mystyles.css topnav.css top.htm
  8. I am working with an HTML5 template that supports youtube video backgrounds in a DIV. When I scale the browser window to see how the responsivnes behaves, I notice that the videos crop left/right, top/bottom, depending on the aspect ratio of the DIV. For my purposes, I would need the videos only crop on the right and top only, so that the bottom left is always visible. As I am not a pro I have been doing a lot of trial and error on this, but cannot get it working. I actually need to have two classes available. One where the video scales from the bottom left and one where it scales from the top right corner. I don't quite understand if I need to create two new classes for "videobg" AND "youtube-background" respectively? That would be "videobg-bl, videobg-tr, youtube-background-bl, youtube-background-tr". Or is just one of those classes responsible for the scaling? This is the HTML snippet I use in the template: <div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0"> <div class="youtube-background" data-video-url="https://www.youtube.com/watch?v=ekthcIHDt3I"></div> <div class="background-image-holder"> <img alt="image" src="img/dancer-1A.png"> </div> </div> and these are the CSS classes for videobg and youtube-background: .videobg { background: #252525; position: relative; overflow: hidden; } .videobg .container, .videobg .background-image-holder { opacity: 0; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; } .videobg .background-image-holder { opacity: 0 !important; } .videobg.video-active .container { opacity: 1; } .videobg.video-active .loading-indicator { opacity: 0; visibility: hidden; } .videobg video { object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } @media all and (max-width: 1024px) { .videobg .background-image-holder, .videobg .container { opacity: 1 !important; } .videobg .loading-indicator { display: none; } .videobg video { display: none; } } .youtube-background { position: absolute; height: 100%; width: 100%; top: 0; z-index: 0 !important; } .youtube-background .mb_YTPBar { opacity: 0; height: 0; visibility: hidden; } @media all and (max-width: 1024px) { .youtube-background { display: none; } } Also, the template is using ytplayer.min.js for the youtube backgrounds. Unfortunately, the player shows branding watermarked elements during the first 2-3 seconds of the clip, that I have no idea how to get rid of. I also have all my clips on vimeo, so it would be so much more convenient to be able to use vimeo backgrounds instead. Is there a simple way to do this, without breaking the above CSS?
  9. Hey, I know this is probably a fairly simple issue but I've never coded a website before so go easy on me! I have this page that I can't seem to get looking right on mobile AND desktop. It's either one or the other. I was hoping someone might have some insight as to how I can make the image on the left and the contact info on the right stack properly without just breaking up the text and/or making the image insanely small on a phone. Here's a screenshot of the page: https://imgur.com/a/DLC2sjR The other problem is that I want it all centred on the page. I mean, I can do "w3-third" for the smaller pictures at the bottom but when I use "w3-half" for the top it just aligns everything left. I want both elements to behave as though they are one on a desktop without an ugly spacing between them and stack on top of eachother on mobile. <!DOCTYPE html> <html> <title>BJH Law</title> <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"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> * { box-sizing: border-box; } body { margin: 0; } .center { margin: 100px; width: 75%; border: 10px solid #009688; padding: 100px; } .column { float: left; width: 33.33%; padding: 100px; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width:600px) { .column { width: 100%; } } img { /* filter: url(filters.svg#grayscale); Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ -webkit-transition: all .8s ease-in-out; } img:hover { filter: none; -webkit-filter: grayscale(0); -webkit-transform: scale(1.01); } </style> <body id="myPage"> <!-- Navbar --> <div class="w3-top"> <div class="w3-bar w3-theme-d2 w3-left-align"> <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-hover-white w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a> <a href="index.html" class="w3-bar-item w3-button w3-teal"><i class="fa fa-home w3-margin-right"></i>Home</a> <a href="index.html#team" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Team</a> <a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Contact</a> <div class="w3-dropdown-hover w3-hide-small"> <button class="w3-button" title="Notifications">Lawyers <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-card-4 w3-bar-block"> <a href="Gary.html" class="w3-bar-item w3-button">Gary L. Bainbridge</a> <a href="James.html" class="w3-bar-item w3-button">James D. Jodouin</a> <a href="Dawn.html" class="w3-bar-item w3-button">Dawn Cheecham</a> <a href="Keir.html" class="w3-bar-item w3-button">Keir Vallance</a> </div> </div> </div> <!-- Navbar on small screens --> <div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium"> <a href="index.html#team" class="w3-bar-item w3-button">Team</a> <a href="index.html#contact" class="w3-bar-item w3-button">Contact</a> </div> </div> <!-- Dawn Bio --> <div class=".center"> <div class="row"> <div class="column"> <img src="images/Lawyer02.jpg" alt="Boss" style="width:100%" class="w3-circle"> </div> <div class="column"> <h1>Dawn Cheecham</h1> <p style="font-size: 50;"> Dawn is a Dene lawyer from the Clearwater River Dene Nation. She works closely with various First Nations governments and organizations on a wide range of issues including the duty to consult, specific claims, governance initiatives and general advice.</p> <p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i> Saskatoon, SK</p> <p><i class="fa fa-envelope w3-text-teal w3-large"></i> <a href="mailto:dcheecham@bjhlaw.ca?" target="_top">dcheecham@bjhlaw.ca</a></p> <p><i class="fa fa-phone w3-text-teal w3-xlarge"></i> <a href="tel:306-664-2468">[306] 664-2468</a></p> <p><i <i class="fa fa-fax w3-text-teal w3-large"></i> [306] 664-2469</p> </div> <!-- Team Container --> <div class="w3-container w3-padding-64 w3-center" id="team"> <div class="w3-row"><br> <div class="w3-quarter"> <a href="Gary.html"> <img src="images/Lawyer01.jpg" alt="Boss" style="width:45%" class="w3-circle"> </a> <h3>GARY L. BAINBRIDGE, QC.</h3> </div> <div class="w3-quarter"> <a href="James.html"> <img src="images/Lawyer03.jpg" alt="Boss" style="width:45%" class="w3-circle"> </a> <h3>JAMES D. JODOUIN</h3> </div> <div class="w3-quarter"> <a href="Keir.html"> <img src="images/Lawyer04.jpg" alt="Boss" style="width:45%" class="w3-circle"> </a> <h3>KEIR VALLANCE</h3> </div> </div> </div> <!-- Footer --> <footer class="w3-container w3-padding-10 w3-theme-d1 w3-center"> <p>Copyright <a href="http://www.bjhlaw.ca/" target="_blank">BJH LAW 2019</a></p> <div style="position:relative;bottom:100px;z-index:1;" class="w3-tooltip w3-right"> <span class="w3-text w3-padding w3-teal w3-hide-small">Go To Top</span> <a class="w3-button w3-theme" href="#myPage"><span class="w3-xlarge"> <i class="fa fa-chevron-circle-up"></i></span></a> </div> </footer> <script> // Script for side navigation function w3_open() { var x = document.getElementById("mySidebar"); x.style.width = "300px"; x.style.paddingTop = "10%"; x.style.display = "block"; } // Close side navigation function w3_close() { document.getElementById("mySidebar").style.display = "none"; } // Used to toggle the menu on smaller screens when clicking on the menu button function openNav() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Yeah the codes a mess please don't make fun lol.
  10. Recently I used a plugin to create a responsive gallery for a website. After some tweaking I got the gallery looking great but I'm having trouble getting the modal controls to cycle the images correctly. This issue has been plaguing me for a few weeks, I'm about to scrap the whole gallery and start from scratch if I can't get these darn buttons to work correctly:/ Really I'm thinking the issue is stemming from the multiple css files that the plugin needs to run the gallery. A link to the actual site: http://testing123.emcfintech.com/#myCarousel (Gallery at bottom of page.) I tried building another gallery based off w3schools responsive gallery and it was looking great on my wamp server but as soon as I brought it into this website the 3rd row of the gallery skips an image and throws off the design. So I reinserted the plugin gallery. My question is should I try to fix the current gallery's controls or burn it down, remove the plugin's css and js and try to build the gallery from scratch? Any help would be greatly appreciated, thank you so much. <div class="mbr-gallery-row container" style="position: relative; height: 642px;"> <div class=" mbr-gallery-layout-default"> <div> <div> <div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="0" data-toggle="modal"> <img alt="" src="/Images/Bump Die 001(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Bump Die</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Responsive" data-video-url="false" style="position: absolute; left: 25%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="1" data-toggle="modal"> <img alt="" src="/Images/COMPACT FORM ROLL (600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Compact Form Roll</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Creative" data-video-url="false" style="position: absolute; left: 50%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="2" data-toggle="modal"> <img alt="" src="/Images/Compact Roll Die and Starblade Module in Headstand(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Compact Roll Die and Starblade Module in Headstand</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Animated" data-video-url="false" style="position: absolute; left: 75%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="3" data-toggle="modal"> <img alt="" src="/Images/Compact Roll Die and Starblade Unit in Headstand(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Compact Roll Die and Starblade Unit in Headstand</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="4" data-toggle="modal"> <img alt="" src="/Images/Finished Fin Mill Machine and Uncoiler(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Finished Fin Mill Machine and Uncoiler</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Beautiful" data-video-url="false" style="position: absolute; left: 25%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="5" data-toggle="modal"> <img alt="" src="/Images/Five - Copper Fin Samples(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Copper Fin Samples</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Responsive" data-video-url="false" style="position: absolute; left: 50%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="6" data-toggle="modal"> <img alt="" src="/Images/Louvered Die(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Louvered Dies</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Animated" data-video-url="false" style="position: absolute; left: 75%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="7" data-toggle="modal"> <img alt="" src="/Images/Louvered Roll Die in Headstand(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Louvered Roll Die in Headstand</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="8" data-toggle="modal"> <img alt="" src="/Images/Louvered Roll Dies(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Louvered Roll Dies</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 25%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="9" data-toggle="modal"> <img alt="" src="/Images/Oil Cooler Roll Die (600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Oil Coller Roll Die</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 50%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="10" data-toggle="modal"> <img alt="" src="/Images/Starblade Unit(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Starblade Unit</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 75%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="11" data-toggle="modal"> <img alt="" src="/Images/Tube Mill Cassette(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Tube Mill Cassette<br></span> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> <!-- Lightbox --> <div data-app-prevent-settings="" class="mbr-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery2-7"> <div class="modal-dialog" style="width: 1037px; top: 10px;"> <div class="modal-content"> <div class="modal-body"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-item"> <img alt="" src="/Images/bump-die-001600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/compact-form-roll-600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/compact-roll-die-and-starblade-module-in-headstand600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/compact-roll-die-and-starblade-unit-in-headstand600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/finished-fin-mill-machine-and-uncoiler600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/five-copper-fin-samples600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/louvered-die600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/louvered-roll-die-in-headstand600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/louvered-roll-dies600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/oil-cooler-roll-die-600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/starblade-unit600x450-2000x1500.jpg"> </div><div class="carousel-item active"> <img alt="" src="/Images/tube-mill-cassette600x450-2000x1500.jpg"> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <a class="close" href="#myCarousel" role="button" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </a> </div> </div> </div> </div> </div> </section>
  11. Dear all, Since bootstrap has container and container-fluid classes, does a heavy lifting, and is easy to use, I am inclined to think that css's media query has no advantage. I'd appreciate sharing any opposite opinion that sees usefulness/advantage in media queries.
  12. Hello, I'm pretty new to html/css and I need some help with the menu from the navigation and the hero-image at less than 620px width. So when I scale down the website, I would like the menu to get under the logo and be centered both. Also, how can I prevent the submit button to overflow the container from the hero-image at less than 620px? This happens when the headline breaks into 2 rows. Here is the codepen link: https://codepen.io/ancapopescu6/pen/xMqJMY Thank you very much!
  13. I wrote media queries which until recently worked - the images are still resizing but for some reason the text has stopped resizing when I make the window smaller. I don't know what I might have done to render them non-functionable. Can anyone spot what it might be? Thank you very much. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton's wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, paragraph { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*THIS IS THE END OF THE MYER RESET*/ * {box-sizing: border-box;} body { width: auto; margin: 0 auto 0; } .parallax { /* The image used */ background-image: url("img_bckgd_windows_7283_1920-4.jpg"); /* Set a specific height */ height: auto; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: repeat; background-size: cover; padding-bottom: 1%; } h1 { font-family: "europa",sans-serif; font-size: 3.6em; letter-spacing: .3em; text-align: center; color: black; padding: 5% 0; padding-top: 7%; } h2 { font-family: "europa",sans-serif; font-size: 2.8em; color: black; letter-spacing: .2em; text-align: center; padding-bottom: 5%; } .flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 50px 50px 50px; padding-bottom: 30px; align-items: center; justify-content: center; font-family: "europa",sans-serif; font-size: 105%; } .nav { margin: 0 30px; } a { text-decoration: none; color: black; } div.nav a { font-size: 1.8em; } .main { width: auto; display: flex; justify-content: space-between; align-items: center; margin-top: 100px; } .browse { width: 20%; margin: 0 5%; } h3 { font-family: "europa",sans-serif; font-size: 2em; letter-spacing: 1.5px; text-align: center; color: 4d4d4d; border-bottom: 2px solid #c30505; padding: 10% 0; } h4 { font-family: "europa",sans-serif; font-size: 1.7em; letter-spacing: 1px; text-align: left; color: 4d4d4d; font-variant: small-caps; padding: 10% 0; } p.indent1 { text-indent: 1em; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.4em; color: black; display: block; margin: 0; } /* CSS FOR SLIDESHOW */ .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { display: flex; justify-content: center; width: ; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 15px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } /* END OF CSS FOR SLIDESHOW */ .indent { text-indent: -9999px; } .about { width: 66%; margin: 0 auto; margin-top: 5%; } .about p { padding: 15px; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.75em; color: black; } .underline { text-decoration: underline; font-variant: small-caps; font-size: 1.1em; } a:hover { text-decoration: underline; } footer { background: #827e90; height: 75px; margin-top: 5%; } footer p { padding: 25px; font-family: "europa",sans-serif; font-size: 1.1em; letter-spacing: .8px; color: white; } .flex-container-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; padding-top: 0px; justify-content: space-between; align-items: center; } .flex-container-footer>div { margin: 0px 50px; } .social a { color: white; } .fa { padding: 10px; font-size: ; width: ; text-align: center; text-decoration: none; border-radius: 50%; } .copyright p { font-family: "europa",sans-serif; color: black; font-size: 1.1em; letter-spacing: .8px; line-height: 135%; font-weight: 500; } /*---------------MEDIA!!!------------*/ @media screen and (max-width: 768px) { html { width: 100%; } h1 { font-size: 2em; } h2 { font-size: 1.4em; } h3 { font-size: 1em; } h4 { font-size: 1em; } p.indent1 { font-size: .8em; } div.nav a { font-size: 1.3em; } div.about p { font-size: 1em; } } @media screen and (max-width: 1366px) { html { width: 100%; } h1 { font-size: 2.6em; } h2 { font-size: 2.2em; } h3 { font-size: 1.6em; } h4 { font-size: 1.3em; } p.indent1 { font-size: 1em; } div.nav a { font-size: 1.3em; } div.about p { font-size: 1.25em; } } </style> </head> <body> <div class="parallax"> <div> <h1>Barton Lewis</h1> <h2>wall cuts</h2> </div> <section class="flex-container"> <div class="nav"><a href="index.html" title="home">home</a></div> <div class="nav"><a href="bartons_film_site_works.html" title="works">works</a></div> <div class="nav"><a href="bartons_film_site_bio.html" title="bio">bio</a></div> <div class="nav"><a href="bartons_film_site_cv.html" title="c/v">c/v</a></div> <div class="nav"><a href="bartons_film_site_contact.html" title="contact">contact</a></div> </section> </div> <section class="main"> <div class="browse"> <h3>Browse</h3> <h4>By color</h4> <p class="indent1"><a href="photography_gallery_color_earth_tones.html" title="Earth tones">Earth tones</a></p> <p class="indent1"><a href="photography_gallery_color_yellows_&_greens.html" title="yellows and greens">Yellows and greens</a></p> <p class="indent1"><a href="photography_gallery_color_purples_&_blues.html" title="purples and blues">Purples and blues</a></p> <p class="indent1"><a href="photography_gallery_color_blacks.html" title="blacks">Blacks</a></p> <h4>By style</h4> <p class="indent1"><a href="photography_gallery_style_ab-ex.html" title="Ab-Ex">Ab-Ex</a></p> <p class="indent1"><a href="photography_gallery_style_color_field.html" title="Color field">Color Field</a></p> <p class="indent1"><a href="photography_gallery_style_graphical.html" title="Graphical">Graphical</a></p> <h4>By size / format</h4> <p class="indent1"><a href="photography_gallery_size_portrait.html" title="Portrait">Portrait</a></p> <p class="indent1"><a href="photography_gallery_size_landscape.html" title="Standard">Landscape</a></p> <p class="indent1"><a href="photography_gallery_size_oversize.html" title="Oversize">Oversize</a></p> </div> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 8</div> <img src="http://bartonlewisfilm.com/img_287-163.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 8</div> <img src="http://bartonlewisfilm.com/img_162-373.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 8</div> <img src="http://bartonlewisfilm.com/img_coors_light.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">4 / 8</div> <img src="http://bartonlewisfilm.com/img_287-135.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">5 / 8</div> <img src="http://bartonlewisfilm.com/img_214-041.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">6 / 8</div> <img src="http://bartonlewisfilm.com/img_157-245.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">7 / 8</div> <img src="http://bartonlewisfilm.com/img_in_theaters.JPG" style="max-width: 100%" alt="in theaters, Elmhurst Ave., IND Queens Blvd. Line " style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">8 / 8</div> <img src="http://bartonlewisfilm.com/img_287-159.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> </div> <div class="browse"> <p class="indent">Oversize</p> </div> </section> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="about"> <p>Lorem ipsum 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> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 3000); // Change image every 3 seconds } </script> <footer> <div class="flex-container-footer"> <div> <p>copyright © 2018 by Barton Lewis</p> </div> <div class="social"> <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a> <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a> </div> </div> </footer> <script> </script> </body> </html>
  14. Hello all and anyone who can help. I'm wondering if there is a way to float an image left or right of some text (so that the text wraps around) to display on large/medium screens while having that image display BELOW the text on small screens. Currently I have it working by hiding sections with different layouts (responsive columns for small screen, no columns for large/medium), but that would require me (or my client) to have to update the same text twice whenever there are changes. On large/medium screens the image would occupy 40 percent of the width, but on small screens (phones) I would want that image to slide under the text at 100 percent width. Make sense? New at responsive, but picking it up. Thanks! Dave
  15. Hi there, I’m a newbie in coding HTML, CSS (very poor in JS) and I would like to make a responsive navbar like that: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp (here the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav). My question is, when the navbar is in “responsive mode” and when clicking the menu button (right side in the example), is it possible to produce a "fade in/out" effects in order to display the menu items? Thank you in advance for your time and for any help you can provide. Sergio
  16. im trying to use the code provided in the w3school's responsive image gallery (https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive) and the basic code works but when i substitute any of the pictures for a portrait rather than a landscape it rotates the portrait image 90 degrees so that it ends up landscape... i am using the exact same code with the exceptions of the images im trying to use
  17. Hello, this is my page: http://melikochi.agencialosnavegantes.cl/productos/ After the section that reads "Elige tu Categoría", i have a bunch of products lining up. What? you can't see them? well, try shrinking your browser windows. Now you can see them, right? That's my problem, this section disapear when you try to see it on a desktop resolution, but if you shrink your browser window to a mobile-phone type width, it appears again. What is causing this? how can i fix it? I borrowed this example to do that section: https://jsfiddle.net/sruf/55dsy2zf/1/
  18. Hello, I was excited to find a template that would work well for me on the W3.CSS site in their examples section (Architect Template- third one down on their templates page: https://www.w3schools.com/w3css/w3css_templates.asp). Unfortunately, it seems that the menu on the Architect Template disappears from view when screen width drops below 600 pixels (tested in both Chrome and IE). I don't know CSS well enough to fix it, and am wondering if it is enough of an error that the template might get fixed if there is a way I could let someone at W3schools know. Otherwise, is that an easy fix that someone here might know how best to fix? I appreciate the free template and understand if this is something I need to work out on my own. Thanks!
  19. Can anyone sight an example to demonstrate the use of Responsive Class and Responsive Grids of W3 CSS? It would be great to understand, if the piece of code shows how to use them together.
  20. So the grid view that is explained here does not work in my own document. This is the code I'm using: /*GRID VIEW*/ [class*="col"] { width: 100%; } @media only screen and (min-width: 720px) { .col1 {width: 8,33%;} .col2 {width: 16,67%;} .col3 {width: 25,00%;} .col4 {width: 33,33%;} .col5 {width: 41,67%:} .col6 {width: 50,00%;} .col7 {width: 58,33%;} .col8 {width: 66,67%;} .col9 {width: 75,00%;} .col10 {width: 83,33%;} .col11 {width: 91,67%;} .col12 {width: 100,00%;} } /*LAYOUT*/ * { font-family: sans-serif; border: 0.1px solid black; } body { width: 100vw; height: 100vh; overflow-y: scroll; margin: 0; } div { height: 100px; background-color: red; } <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="col3"></div> </body> Does anyone see what's wrong? The div has always a width of 100% in my browser (safari)... Thanks!
  21. I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
  22. Hello, New here I am currently have 3 different stylesheets for my website: Desktop - layout.css is working fine. Tablet - tablet.css is also working fine. now I have a css for mobile which is mobile.css. On the mobile.css when I look the version on an iPhone 6 the navigation bar is so small. here is the index.html and mobile.css file: Mobile CSS File: body { margin: 0; background-image: url(../images/bg2.jpg); } img { max-width: 100%; height: auto; } ul.topnav { list-style-type: none; margin: 0; padding: 25px; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 30px 16px; text-decoration: none; transition: 0.3s; font-size: 25px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:320px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:320px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } Index.html file is: <html> <head> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width,initial=1.0"> <link href="css/mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 1023px)" /> <link href="css/layout.css" type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" /> <title>Morris Technologies of Amarillo</title> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/header.jpg" alt="Morris Technologies of Amarillo" width="1000" height="300"> </div> <ul class="topnav" id="myTopnav"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div> <script> /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body>
  23. Hi all, I'd like to make a responsive navigation bar with a drop down menu using jQuery but I'm having some difficulties getting it work properly. I've just started learning jQuery so my knowledges in this language are very limited for the moment. I know there is a tutorial precisely for that on w3school but I followed this tutorial on YouTube as the result is closer to what I would like to end up with. Besides, the code looks easier to me. What I'm trying to do is basically the same thing but without using an external <div> for the menu bar, which I would like to include in the list elements. To do so, I hid all the list elements using a max-height to 0 except for the "menu" one, then I toggleClassed all the list elements but the "menu" one so they get the new declaration max-height= 3em. Unfortunately, the menu doesn't drop down when clicking on the "menu" bar. Any help? Thanks. Here is the .html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="responsiveMenu2.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Test</title> </head> <body> <header> <h2>responsive navigation (mobile first)</h2> <nav> <ul> <li class="menu" id="menu"><a href="#">menu</a></li> <li class=""><a href="#">home</a></li> <li class=""><a href="#">galleries</a></li> <li class=""><a href="#">news</a></li> <li class=""><a href="#">about</a></li> <li class=""><a href="#">contact</a></li> </ul> </nav> </header> <section> <article> Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet. </article> </section> <script> $(".menu").on("click", function(){ $("nav ul li").not(".menu").toggleClass("showing"); }); </script> </body> </html> And the .css *{ box-sizing: border-box; } html{ width: 100%; min-height: 100%; } body{ height: 100%; margin: 0; padding: 0; text-align: center; } header{ background-color: #00795f; width: 100%; padding: 40px 0 0 0; color: white; text-transform: capitalize; } nav{ margin-top: 40px; width: 100%; background-color: #43a286; text-transform: capitalize; } nav ul{ list-style-type: none; padding: 0; margin: 0; } nav ul li:not(#menu){ max-height: 0; -webkit-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } nav ul li a{ display: block; width: 100%; line-height: 3em; text-decoration: none; color: white; } nav ul li a:hover{ background-color: #399077; } section{ line-height: 1.5em; font-size: 0.9em; padding: 0; width: 100%; } article{ text-align: justify; padding: 5% 4%; } #menu{ background-color: #005c48; cursor: pointer; } .showing{ height: 3em; } @media screen and (min-width: 680px){ #menu{ display: none; } nav{ height: 3em; } nav ul li{ display: inline-block; margin: 0 1%; } nav ul li a{ padding: 0 20px; line-height: 3em; } section{ max-width: 900px; margin: 0 auto; } }
  24. Hi there, I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it my code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <ul class="w3-navbar w3-large w3-black w3-hide-small"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Sublink 3a</a> <a href="#">Sublink 3b</a> <a href="#">Sublink 3c</a> </div> </li> </ul> <a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()"> <div class="w3-black" style="padding: 8px 16px"> ☰ </div> </a> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Dropdown Hover</a> <ul class="w3-navbar w3-left-align" style="padding-left: 15px;"> <li><a href="#">Sublink 3a</a></li> <li><a href="#">Sublink 3b</a></li> <li><a href="#">Sublink 3c</a></li> </ul> </li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Peace and love
  25. Hi, We are in the process of building a responsive webpage. At gallery we encounter a problem where at certain resolutions (1280 x 800 for example) where the images on the gallery page do not arrange correctly. This is the test page: http://pavexparquet.pdtestare.eu/1-gallery.htm tested at this resolution gives page arrangement errors: http://quirktools.com/screenfly/#u=http%3A//pavexparquet.pdtestare.eu/1-gallery.htm&w=800&h=1280&a=24 After trying different solutions - making 4 columns instead of 6, changing text length, changing text setups - we have no idea where the problem could be. Can somebody help? Thank you. Tim
  • Create New...