lege ruimte aan de rechte kant van hero afbeelding ?

  • Opgelost johannes999

    (@johannes999)


    1 jaar geleden

    Hallo,

    ik heb deze probleem ik ben 2 dagen bezig geweest om op te lossen maar is niet gelukt. ik heb AI raadpleegde maar niet geholpen .

    deze is html :

    <div class="header-image">
  <img src="https://webdesignmaster.eu/wp-content/uploads/2023/10/hero-image.webp" alt="home-page-image" width="100%" height="auto">
  <div id="myText"></div>
</div>

    and deze is css code :

    	body, html{
	margin:0;
	padding:0;
	width:100;
	max-width:100%;
	
	}
	
* {		box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
	
		#site-header {
display:flex;
flex-direction:row;
   width:100%;
  height:4rem;
  background-color:#34495e; 

position:fixed;
z-index:1;

}

.subsection-site-header {
 display:flex;
  width: 100%;
 
}

	.site-header-left-side {
		display:flex;
		justify-content:flex-start;
		width:33.333%;
		margin-left:2%;
	}
	
	.logo {
	font-family: 'Merriweather', serif;
    font-weight: 700;
	margin-top:1rem;
		
	}
	
	.word1 {
position:relative;
font-size:26px;	
color:white;
z-index:1;
   
}

.word2 {
font-size:21px;	
color:#ffd978;	
margin-left:-0.2rem;
 
}

.word3 {
position:relative;
z-index:1;
font-size:15px;	
color:white;	
   
}
	
	.site-header-right-side {
        display:flex;
		justify-content:flex-end;
		width:66.666%;
		margin-right:2%;
	
  
}
.header-image {
	display:flex;
    position: relative; /* Add this to enable positioning */
      text-align: center;
	overflow: hidden; /* Ensure that the image doesn't overflow the container */
	width:100%;
	
}

.header-image img {
    max-height: 600px;
       height: auto; 
    max-width: 100%;
      width:1280px;
    margin-top:4rem;
}

    dit gebeurd alleen in de resolutie 1081-1280pixels .er is geen enkele probleem bij andere resoluties

    er is een witte ruimte aan de rechte kant . net als u ziet in css code ik heb geprobeerd :

    body, html{
	margin:0;
	padding:0;
	width:100;
	max-width:100%;
	
	}

    maar niet geholpen . weet iemand misschien waar het fout is ?

    hoe ik kan deze probleem oplossen ?

    Dank u wel

    • Dit onderwerp is gewijzigd 1 jaar geleden door johannes999.

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Moderator Richard van Denderen

    (@rdd)

    1 jaar geleden

    In je #contact section zit een margin van 4% de even wat problemen lijkt te geven.

    wat je ook kan doen is tijdelijk aan alle elementen een rode border toevoegen, dan kan je wat makkelijker zijn wat waar uitsteekt en dit veroorzaakt.
    *{border: 1px solid red!important} in de extra css van de customizer plaatsen geeft vaak al een duidelijk beeld van elementen die problemen geven.

    Na een paar keer herladen zie ik op dit moment het probleem al niet meer op de vermelde pagina.

    Thread starter johannes999

    (@johannes999)

    1 jaar geleden

    ik heb het weg gedaan en probleem is opgelost.

    hartelijke bedankt.

    dank u wel

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘lege ruimte aan de rechte kant van hero afbeelding ?’ is gesloten voor nieuwe reacties.