browser window not resizing for text per media queries

bartonlewis · June 16, 2018

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>

dsonesuk · June 17, 2018

You have missing value and units for some properties, and your media queries using max-width are wrong way round higher top followed by lower

1366

768

By adding different background-color: to html or body, you can identify which is triggered or not, and what and where it needs to be changed.

Only by using min-width would the media queries current position be correct.

Edited June 17, 2018 by dsonesuk

bartonlewis · June 17, 2018

Thank you. Simply putting the media queries in the correct order made them work.

Sign In

browser window not resizing for text per media queries

Recommended Posts

bartonlewis

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

bartonlewis

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity