Crazy 777 online login.REGISTER NOW GET FREE 888 PESOS REWARDS!

Resolved

(@johannes999)

hello,

this is the html code :

<div class="slideshow-container">
      <div class="mySlides fade">
       
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1920-1080.jpg" alt="Slide 1"  style="width: 100%"    height="auto"  background-color:"red"    />
        	<div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW Specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>
		</div>
		<div id="title-info">		
	<div class="menu-title"> 	Menu</div>	
<div class="title">	X Auto Service</div>
	
<div class="title-description"> auto repair service</div>
	</div>   
		  
      </div>

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1924-1080.jpg" alt="Slide 2"  style="width: 100%"   height="auto"    />
		   <div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
	<div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>
			
	</div> 	
      
      </div>

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/mini-cooper-image-for-Home-page-1920-1080.jpg" alt="Slide 3"  style="width: 100%"  height="auto"  />
		   <div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
	<div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>
	</div> 		  
	 </div>
	 
	     
	
	
		
	 <div>
		 
	 
	 
		<message1>
<h1>  <span>FULL</span>   <span>SERVICE</span>   <span>OF</span>  <span>AUTO</span>   <span>REPAIR</span>
<span>And</span>  <span>Maintenance</span>  <span>PROFESSIONAL</span> <span>HELP</span>   <span>AND</span>
	<span>DURABLE</span>  <span>REPAIR</span>  <span>SERVICE</span>   </message1>  </div>
			
			
			
	
			 <div id="figure" style="text-align:center"> 
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
		</div> 
			
	 
	 </div>

and this is the CSS code:

@media (min-width: 1620px) and (max-width: 2219.999px)  {
	* {
  box-sizing: border-box;
  margin:0;
  padding:0;
	
	}
 html, body {
	 max-width: 100%;
    overflow-x: hidden;
	
}
	
	
	
	.site-header1 {
  z-index:2;	
	max-width:100%;
background-repeat: no-repeat;
 position:relative;
box-sizing:inherit;
   margin-top:0;

	
}


.site-header2 {
 z-index:2;	
	max-width:100%;
background-repeat: no-repeat;
 position:relative;
box-sizing:inherit;
   margin-top:0;



	
}

.site-header3 { 

  z-index:2;	
	max-width:100%;
background-repeat: no-repeat;
 position:relative;
box-sizing:inherit;
   margin-top:0;	
}


.site-header4 { 
 z-index:2;	
	max-width:100%;
background-repeat: no-repeat;
 position:relative;
box-sizing:inherit;
   margin-top:0;


	
}

.site-header5 { 
 z-index:2;	
	max-width:100%;
background-repeat: no-repeat;
 position:relative;
box-sizing:inherit;
   margin-top:0;


}
	
	 .mySlides {
        display:none;
	     
      }

      img {
        vertical-align: middle;		
		   
      } 
	 
	
	
	 #figure {
    	position: absolute;
    bottom: 0; 

 
	}

	
	
	
      /* Slideshow  */
      .slideshow-container { 
				 width:100%;
      		position:relative;
		margin:auto;
		  display:flex;
		  justify-content:center;
		  
      }
	
      
    
      
      .dot {
        height: 15px;
        width: 15px;       
        background-color:red;
        border-radius: 50%;
		  display: inline-block;
  transition: background-color 0.6s ease; 
		margin:0 4px;
		
		 
      }
	
	
	
	
	
	
.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		
}   
    
      .fade {
        animation-name: fade;
        animation-duration: 6s;
      }

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

message1 {
	width:100%;
	top:50%;
	left:0.25%;
	position:relative;	
  font-size:1rem;
  color:green;

	
}


message {
	width:100%;
	top:38.5%;
	left:0.25%;
	position:absolute;	
  font-size:1rem;
  color:green;

	
}

h1 {
	
	
  
  max-width: 40ch;
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);

animation-iteration-count:5;
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

the problem is: this code is working very wel until up to 1620px .

when I open my web page on 1920px I see the slidershow takes only about 50% of screen while it has to take 100% of the screen .

and the animation text takes the other 50% while the animation text has to be in the slidershow . under 1620px you can see that everything is working very well. I have disabled other codes between 1620px to 2219.999px to be sure that there is no typo fault.

I tried many ways to solve the problem but I couldn’t find any clue.

where it can be the problem?

you have to open my web page on larger screen to see exactly what I mean.

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

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

Moderator bcworkz
(@bcworkz)

2 years, 1 month ago
Add or combine into existing media queries:
```
@media (min-width: 1620px) and (max-width: 2219.999px)
.slideshow-container {
    flex-direction: column;
}
```
The text overlay (FULL SERVICE…) needs to be absolute positioned. It doesn’t have its own class or ID to use as a CSS selector. Ideally, one would be added, but might be difficult with the slider you use, IDK. You could use the :nth-child() pseudo selector, but it’ll become invalid if you change the number of images.

The text also needs better styling such as red instead of green, and perhaps some left: distance to get it away from the edge.
Thread Starter johannes999
(@johannes999)

2 years, 1 month ago
thanks,

the problem was here :
```
message1 {
	width:100%;
	top:50%;
	left:0.25%;
	position:relative;	
  font-size:1rem;
  color:green;

	
}
```
the position had to be absolute in place of relative.

the problem is solved.

I found it by chance.

the green color and font-sizes are only for test reason . I wil change it all after I finish media queries.

thanks again

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

The topic ‘the slidershow images and the message text are deforming after 1620px?’ is closed to new replies.

the slidershow images and the message text are deforming after 1620px?

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics