is this conditional code below for multiple pages are OK?

I don’t know how you can visually tell the difference in the frontend? The header currently looks a bit undesigned, but I have no idea how it should look there.

What strikes me is that when the page loads, several files fail to load. These are attempted to be integrated via https:// instead of https:// which modern browsers block.

thanks ,

I was disabled some code now I have reset it.

I changed also https to http on my web hosting but the problem still exists.

when you open inspect element untill 480px it is OK after it it is not showing the header untill about 800px. after it it is showing again.

and now comes extra problem it is not recognizing the image in extra1 which is targeted for onderhoud page header.

everthing was OK I don’t know I had virus on my latop I made reset 2 days ago . I have scanned my website there is no problem as much I know.

I have also removed everything and made everything from scratch but the problem is not solved. I don’t know any more .

it is not possible to not show the header between 481 to 800px .

how it comes this problem? it is also not possible to not show the image in the onderhoud page (extra1).

this is my code for targetting the other headers for every page which I think it is OK:

<?php
if ( is_page('onderhoud') ) :
    get_header('extra1');
elseif ( is_page('banden') ) :
    get_header('extra2'); 

elseif ( is_page('apk') ) :
    get_header('extra3'); 
elseif ( is_page('contact') ) :
    get_header('extra4'); 
elseif ( is_page('bedankt') ) :
    get_header('extra5'); 
else :
    get_header();
endif;

?>

can you see here above any fault . if not I am going to change this underscore theme with onother theme!

thanks

Syntactically it looks right, but unfortunately I still can’t judge what it should do. I don’t know what you mean by 480px and what you mean by 800px.

thanks ,

actually everything was ok untill I thought that I have to make from section box carousel with JS to let the texts been shown 1 by 1 under 700px resolution.

after that this problem came .

this is what I mean:

/* Mobile */
	@media (min-width: 240px) and (max-width: 480px) { 
		
	* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
 html, body {
	 max-width: 100%;
    overflow-x: hidden;
	
	
}
	
.flex-container {
	width:100vw;
	max-width:100%;
   height: 150px;
  position: fixed;
  top:0;
  left: 0;  
	z-index:9999;
	display:flex;
	flex-direction:column;
background-size:cover;

}

	.row1 {
		
    width:100vw;
	max-width:100%;
	height:50%;
	background:#4b5054;	
background-size:cover;
	}	

	.row2{
	width:100vw;
	max-width:100%;
	height:50%;
	background:#45accb;	
	background-size:cover;
	} 

		.info {
	display:none;
		
	}
	
	.section2 {
	width:100%;
	display:flex;
	flex-direction:row;
		
	}

.nav-section {
  width:96%;
  margin-left:4%;
  display:flex;
  justify-content:flex-start;
}

	.menu {
position:fixed;
width:40px;
height:40px;
background:black; 
margin-top:0.6rem;

}
	
	
	.title {
	display:flex;
	margin-left:4rem;
	font-size:16px;
	color:#ffd978;
	margin-top:1.2rem;	
	}

	.info2 {
		
		display:none;
	
		
	}

	.info3{		
		display:none;	
		
	}
	
	
	
	.menu-title {
		width:96%;
		display:flex;
		justify-content:flex-start;
		font-size:14px;
		color:#ffd978;
		margin-left:4%;
		margin-top:0.6rem;
	}	
	
	.header2-section1{
		width:100%;
		display:flex;
		flex-direction:row;
		margin-top:0.6rem;
	}

		
	
	
	

		.info4{

		width:33.333%;
		display:flex;
		justify-content:flex-start;
		color:white;
		margin-left:4%;
		font-size:12px; 
	}
		
		.info5{
		width:33.333%;
		display:flex;
		justify-content:center;
		color:white;
		font-size:12px;
	}
		.info6{
		width:33.333%;
		display:flex;
		justify-content:flex-end;
		color:white;
		margin-right:4%;
		font-size:12px;
	}
		
		
		
	
	.header2-section2 {
		width:100%;
		display:flex;
		flex-direction:row;
		margin-top:0.4rem;
	}
	
	.description1 {
	width:96%;
	display:flex;
	justify-content:flex-start;
	margin-left:4%;	
	font-size:16px;
	color:white;
	}
	
	.description2 {
		
		display:none;

	}
	
	.description3 {
	display:none;

	}		


	
 /* Slideshow  */

  #slideshow { 
				 width:100%;
	              max-width:100%;
      		position:relative;
			  display:flex;
		  justify-content:center;
		 margin-top:9.25rem;
	background-size:cover;
		 
		  
      }


 .mySlides {
        display:none;
	     
      }

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

 
	}    
    
      
      .dot {
        height: 10px;
        width: 10px;       
        background-color:red;
        border-radius: 50%;
		  display: inline-block;
  transition: background-color 0.6s ease; 

				 
      }
	
	
	
.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.8;
        }
        to {
          opacity: 1;
        }
      } 
		
		
/*Tekst animation--*/				
		
		.p {
  position: absolute;
  font-size: 1.2rem;
  font-family: sans-serif;
  font-weight: bold;
  top: 50%;
  left: 48.5%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
 

/*Section-pages--*/
		.onderhoud-image {
		 width:100%;
      		position:relative;
			  display:flex;
		  justify-content:center;
	margin-top:9.25rem;
	
}

.banden-image {
	
	 width:100%;
      		position:relative;
			  display:flex;
		  justify-content:center;
		margin-top:9.25rem;
	
}

.apk-image {
	
	 width:100%;
      		position:relative;
			  display:flex;
		  justify-content:center;	
		margin-top:9.25rem;
}


.contact-image {
	
	 width:100%;
      		position:relative;
			  display:flex;
		  justify-content:center;
		margin-top:9.25rem;
	
}

.bedankt-image {
	
	 width:100%;
      		position:relative;
			  display:flex;
		  justify-content:center;
		margin-top:9.25rem;
	
}
	

.box {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;


}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;

}
.slider.active {
  opacity: 1;
}

.box-item1 {
	display:flex;
	flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
line-height:0;
  background-color: #4b5054;
}

.box-item2 {
	display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
line-height:0;
  background-color: #4b5054;
}
		
.box-item3 {
	display:flex;
justify-content:center;
flex-direction:column;
align-items:center; 
text-align:center;
line-height:0;
  background-color: #4b5054;
}

.slider h4, .slider h5, .slider h6, .slider h7 {

  color: white;

  
}
		
	.slider h4 {
  font-size: 16px;
	color:#ffd978;
}

.slider h5 {
  font-size: 14px;

}

.slider h6 {
  font-size: 14px;
  
}

		.slider h7 {			
			
			font-size:14px;
		
		}
		
	.box-item1 h5, h6{
	
margin-top:-0.3rem;
		}

		}
	.box-item2 h5, h6, h7 {
	
margin-top:-0.3rem;
		}
	
		}
	.box-item3 h5, h6 {
	
margin-top:0.3rem;
		
		}
	
	.entry-title {
		display:none;
		
	}
	
	.entry-footer {
		display:none;
	}
}

when you open inspect element untill this resolution there is no problem.

but after:

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

the home page header disappears and after 767px it comes back .

plus I get extra problem every header image is nor whowing up.

I just was thinking to make everything from pages section in place of header.php extra1,extra2 php section. and see if the problem wil be solved.

otherwise I am going to use onother theme to see if the problem exists . if yes then it means it is from database or virus.

I have worked for this website about 9 months to learn coding and I was almost finished untill I came to last step which was media queries.

and suddenly I got this problem.

after I finish this website I wil work with elementor pro . it is beter to work visually . but I want first to finish this website with coding.

thanks