when I start writing media query I get some problem with the class under slider?

  • Resolved johannes999

    (@johannes999)


    1 year, 9 months ago

    hello,

    I have this problem . I have set media query for just testing between 220px and 300px .

    the problem is when I go higher than 220 pixels the box under it is coming partially in the slidershow. you can see from color on the bottom of the slider when you go up from 220 to 300px.

    here is my code in html:

    			 <div id="figure" style="text-align:center"> 
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
		</div> 
			
	 
	 </div>
		
		
			
		<div class="box ">
		
			
<div class=" box-item1">
<h4>XXXAutoXXXX</h4> <br>
<p>	KLoaaaaamzp122 <br>
	3192OOxaab </p>

</div>
<div class=" box-item2 ">
<h4>Openingstijden</h4> <br>
<p>	Ma t/m vrij 08:00 - 18:00 <br>
	Zaterdag 08:30 - 12:00 </p>
<h6> Zondag Gesloten</h6>
</div>

		<div class=" box-item3">

     <h4>Direct-Bellen 	</h4>  <br>
<p>  Tel:0zz-4xx12xc  <br>
	Mob:064xcyesdg </p> </div>
		</div>

    and this is my css code:

    @media (min-width: 220px) and (max-width: 300px) {
	
	* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
 html, body {
	 max-width: 100%;
    overflow-x: hidden;
	
}

     .mySlides {
       
 display:none;

	     
      }

      img {
       vertical-align: middle;

		
      }
	
	
	 #figure {
    	 
	margin-top:-10%;
 
	}

	
	.dot{
		
	 height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color:red;
  border-radius: 50%;	
	 display: inline-block;
  transition: background-color 0.6s ease; 	
		
	}
	
      /* Slideshow  */
      #slideshow-container { 		 
		 width:100%;
      		position:relative;
		margin:auto;
      }

  
	

    
.dot.active {
  background-color: #333;
	
} 

 
.dot.active:after {
    content: "";
       transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
	transition-delay: 1s;    
    position:absolute;
    left:5px
		
}



      /* Fading animation */
      .fade {
        animation-name: fade;
        animation-duration:6s;
      }

      @keyframes fade {
        from {
          opacity: 0.5;
        }
        to {
          opacity: 1;
        }
      }
   	

    
	
	#container-info {
	
	display:none;
	
}
	
	#title-info {
	display:flex;
	flex-direction:row;
	width:100%;
	max-width:1920px;
}


.menu-title{
	
	font-size:1rem;
	color:red;
     width:30%;
   	justify-content:flex-start;
	margin-left:0%; 
	 margin-top:-43.5%;
	float:left;
	position:relative;	
	
}
.title {	 
	 width:60%;
	font-size:1rem; 
		 color:red;
	font-family: 'Ravi Prakash', cursive;
     margin-top:-47.25%;
	position:relative;
	float:left;
      margin-left:-8%;
	}


.title-description {
	
display:none;

} 
	
	message {
		
		display:none;
	}
	
	message1{
		
		display:none;
	}
	
	
	
	
	 .box {
    box-sizing:inherit;
	border:0.01 solid #4b5054;
/* background-color:#4b5054; */
   background-color:red;
   width:100%;
   height:100px;	
	margin-top:0rem;
max-width:1920px;	
display:flex;
flex-direction:column;
	}
	
.box-item1{
display:none;
}
 
.box-item2{
display:none;

}

.box-item3{
	width:100%;
	justify-content:flex-start;	
	padding-top:12.5px;  	
	float:left;
	margin-left:4%;
}

    when you open inspect element on my home page and go to responsive mode and put resolution to 220px und start going up untill 300pixels you wil see that the box with color red starting coming inside the slidershow .

    I have tried everything I made seperate div class for the box class I putted the box class in the page.php but it didn’t help.

    the problem is coming from that I am using minus for the figure class(dot) but I have no choice other wise the dots wil be outside the slidershow-container.

    is there any other way to solve this problem?

    thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @johannes999

    It doesn’t seem to happen because of the dots, but the element under the slideshow which has negative top margin:

    @media (min-width: 180px) and (max-width: 279.9999px){
.box {
    box-sizing: inherit;
    border: 0.01 solid #4b5054;
    background-color: #4b5054;
    /* background-color: red; */
    width: 100%;
    height: 100px;
    margin-top: -0.3rem;
    max-width: 1920px;
    display: flex;
    flex-direction: column;
}
}

    that pulls this element over the slideshow. So I’d suggest to deal with this “box” element and remove its negative margin.

    Negative margins can cause quite odd things so perhaps the best would be eliminating all negative margins and using a different approach to do this. For example, you could put the dots in absolute position (and make the slideshow have relative position) so you could align the dots to the bottom of the slideshow container. You could use flexbox for centering:

    .slideshow-container{
    position: relative;
    display: flex;
    justify-content: center;
}
#figure {
    position: absolute;
    bottom: 0;
}

    And make sure you remove the top margin from the .box element.

    Thread Starter johannes999

    (@johannes999)

    thank you very much ,

    you solved for me big problem I would never could think about it .

    thanks again

    Thread Starter johannes999

    (@johannes999)

    sorry,

    this was stubid fault of me.

    I used for class slideshow-container in HTML

    #slideshow-container in CSS . typo fault I have found it by chance.

    sorry again

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘when I start writing media query I get some problem with the class under slider?’ is closed to new replies.