Jump to content

Search the Community

Showing results for tags 'media query'.

More search options

  • 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








Found 5 results

  1. bartonlewis

    element not resizing correctly in browser

    I don't know a lot about media queries but I created them for a page on my website mainly for the resizing of text and all worked well except for an element which is not moving with other elements inside their container, but is being pushed up above them as you size down the browser window. I've extracted the relevant code and pasted it here. Can anyone tell me what I should be doing to keep the div called "browse" in the same relationship to the slideshow to its right? Thank you. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://use.typekit.net/qkv6kzb.css"> <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> * {box-sizing: border-box;} body { width: auto; margin: 0 auto 0; } .nav { margin: 0 30px; font-size: 1.8em; } a { color: black; text-decoration: none; } a:hover { text-decoration: underline; } .main { width: auto; display: flex; justify-content: space-between; align-items: center; margin-top: 10%; } .browse { width: 20%; height: 600px; display: flex; flex-direction: column; justify-content: flex-start; margin: 0 5%; font-size: .8em; } h3 { font-family: "europa",sans-serif; font-size: 2.8em; letter-spacing: 1.5px; text-align: center; color: black; margin-top: 35%; margin-bottom: 10%; border-bottom: 2px solid #e00606; padding-bottom: 20%; } h4 { font-family: "europa",sans-serif; font-size: 2.2em; letter-spacing: 1px; text-align: center; margin: 12.5% auto; } a.color { -webkit-transition: color .5s; /* for Safari 3.0 to 6.0 */ transition: color .5s; /* for modern browsers */ text-decoration: none; color: black; } a:hover.color { color: rgb(41, 16, 229); font-weight: 600; font-size: 1.1em; text-decoration: none; } a.styling { -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } a:hover.styling { font-family: "blambot-fx-pro",sans-serif; font-size: 1.25em; text-decoration: none; } .zoom { transition: transform .1s; /* Animation*/ } .zoom:hover { transform: scale(2); } .zoomlink:hover { text-decoration: none; } /* CSS FOR SLIDESHOW */ .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { display: flex; justify-content: center; } /* 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; } /*---------------MEDIA!!!------------*/ /*----------1920 x 80% = 1536--------*/ @media screen and (max-width: 1536px) { h1 { font-size: 3em; } h2 { font-size: 2.4em; } h3 { font-size: 2.2em; } h4 { font-size: 1.8em; } h5 { font-size: 1.9em; } .indent1 { font-size: 1.6em; } .nav { font-size: 1.4em; } div.about_main p { font-size: 1.25em; } div.about_aside p { font-size: 1.25em; } .extdet { font-size: 1.25em; } .caption { font-size: 1.2em; } .return p { font-size: 1.5em; } } /*--------1536 x 89% = 1367----------*/ @media screen and (max-width: 1366px) { h1 { font-size: 2.7em; } h2 { font-size: 2.1em; } h3 { font-size: 2em; } h4 { font-size: 1.6em; } .indent1 { font-size: 1.4em; } .nav { font-size: 1.25em; } div.about_main p { font-size: 1.25em; } div.about_aside p { font-size: 1.25em; } .caption { font-size: 1.1em; } .return p { font-size: 1.3em; } } /*--------1366 x 75% = 1024----------*/ @media screen and (max-width: 1024px) { h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.5em; } h4 { font-size: 1.2em; } .indent1 { font-size: 1em; } .nav { font-size: 1em; } div.about_main p { font-size: .9375em; } div.about_aside p { font-size: .9375em; } .caption { font-size: .825em; } .return p { font-size: .975em; } } /*--------1024 x 75% = 768----------*/ @media screen and (max-width: 768px) { h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } h3 { font-size: 1.125em; } h4 { font-size: .9em; } .indent1 { font-size: 1em; } .nav { font-size: .75em; } div.about_main p { font-size: .7em; } div.about_aside p { font-size: .7em; } .caption { font-size: .6em; } .return p { font-size: .73em; } } </style> </head> <body> <section class="main"> <div class="browse"> <h3>Browse by</h3> <h4><a class="color" href="photography_browse_color.html" title="Color">Color</a></h4> <h4><a class="styling" href="photography_browse_style.html" title="Style">Style</a></h4> <h4 class="zoom"><a class="zoomlink" href="photography_browse_size.html" title="Size"><span>Size</span></a></h4> </div> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 7</div> <img src="http://bartonlewisfilm.com/img_287-163_1500.jpg" style="max-width: 100%" alt="287-163, Flushing Ave., IND Crosstown Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 7</div> <img src="http://bartonlewisfilm.com/img_162-373_1500.jpg" style="max-width: 100%" alt="162-373, 50th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 7</div> <img src="http://bartonlewisfilm.com/img_coors_light_1500.jpg" style="max-width: 100%" alt="Coors Light, 135th St., IND Eighth Ave. Line " style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">4 / 7</div> <img src="http://bartonlewisfilm.com/img_287-135_1500.jpg" style="max-width: 100%" alt="287-135, Flushing Ave., IND Crosstown Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">5 / 7</div> <img src="http://bartonlewisfilm.com/img_157-245_1500.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 / 7</div> <img src="http://bartonlewisfilm.com/img_in_theaters_1500.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">7 / 7</div> <img src="http://bartonlewisfilm.com/img_287-159_1500.jpg" style="max-width: 100%" alt="287-159, Flushing Ave., IND Crosstown 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> </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> </body> </html>
  2. Hi gang, thanks for taking some time to check this out. I'm driving myself insane trying to figure out why I can't see the changes I make in my media queries on my phone. They work as they should on all browsers. The caveat is that I do in fact have <meta name="viewport" content="width=device-width, initial-scale=1"> in the head of my index. Most posts I see out there don't have that in their html and once they post that it clears up for them. I am hosting my site on bluehost and I do use Cloudflare. I once learned that purging the files on cloudflare resets the cache so that you can see the changes take effect. Basically, when I make a change in my media query, I up load it to the server, then I run over to cloudflare to clear the cache and when I refresh chrome on my LG Stylo 2 phone, I don't see the changes at all. In fact, it looks like it still inherits the previous version before any changes were made. What in heck am I missing?
  3. MarcosFM

    Media queries in px or cm?

    Hi! I've been reading about media queries in www.w3schools.com and then thinking about the screen sizes of mobile phones, tablets, laptops and desktops. As you can see in webpages like http://screensiz.es/ the width of a Huawei Nexus 6p (mobile phone) is 1440px, while the width of a Lenovo Thinkpad X230 (laptop) is 1366px. This means that the number of pixels of a screen doesn't tell us its real size and, therefore, I don't think it makes sense to create media queries in px, like the following example from www.w3schools.com: @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } I think it would be better to write the above media query as follows (I think 14 cm is the maximum width you can find in mobile phone screens today): @media only screen and (max-width: 14cm) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } Maybe I'm making a mistake, I don't know... Could anybody help? Thank you, Marcos.
  4. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  5. Hello Friends, I have the following CSS class 'box' defined with 'min-width' media query. @media screen and (min-width: 768px) { .box {display:none} } But this class is not showing in dreamweaver class suggestions. But when I put the same class using 'max-width', then suggestion is showing as per the following screenshot. Anyone know whats the reason and how to resolve this. Thanks in advance. Thanks! Shaiju.