Jump to content

element not resizing correctly in browser

bartonlewis

By bartonlewis
in CSS

 Share

Recommended Posts

bartonlewis Newbie

bartonlewis

Posted
Posted

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>

 

Link to comment
Share on other sites
webtrickshome Newbie

webtrickshome

Posted
Posted

You are overriding you media query css with your own blocks of css.

Here's a list of screen sizes from webtrickshome you can use there.

Screen Size Media Query
Max width 320px @media (max-width: 320px)
Min width 321px and Max width 375 @media (min-width: 321px) and (max-width: 375px)
Min width 376px and Max width 425 @media (min-width: 376px) and (max-width: 425px)
Min width 426px and Max width 640 @media (min-width: 426px) and (max-width: 640px)
Min width 641px and Max width 767 @media (min-width: 641px) and (max-width: 767px)
Min width 768px and Max width 992 @media (min-width: 768px) and (max-width: 992px)
Min width 993px and Max width 1024 @media (min-width: 993px) and (max-width: 1024px)
Min width 1025px and Max width 1440 @media (min-width: 1025px) and (max-width: 1440px)

 

Generally, I'd use one as:

@media(max-width:767px){} which would cover all smaller screens and another as

@media(min-width:768px){} which would cover all larger screens.

In case of complicated layouts, i'd use something like

@media(max-width: 420px){}

@media(min-width: 421px) and (max-width: 767px){}

and go on to break down the screen sizes and restrict their impact on other screen sizes.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...