Ondersteuning » Thema en CSS/opmaak » ik zet hoogte van een klas(heeft 2 gedeeltes) op 389.25 px maar wordt ongelijk?

  • Opgelost johannes999

    (@johannes999)


    hallo,
    ik heb een vraag!
    wanneer ik de hoogte zet van een klas bijv. op 389.25px ik krijg afwijking van de 2 gedeeltes van die klas .1 gedeelte is korter dan de 2e gedeelte.

    .flex-container-home-page-section1{
      width:100%;
    	margin-left:4%;
    	margin-right:4%;
    	max-height:389.25px; 
    	display:flex;
    	flex-direction:row;
     margin-top:10.5rem;
    	
    }
    

    2-wanneer ik helemaal geen hoogte zet ik krijg 2 gedeeltes
    hoogte gelijk.

    .flex-container-home-page-section2{
      width:100%;
    	margin-left:4%;
    	margin-right:4%;
     display:flex;
    flex-direction:row;
    margin-top:5rem;
    
    }
    

    U kunt zien op mij website home pagina wat ik bedoel . hetzelfde probleem is met percentage het mag niet uit of ik de hoogte 20% zet of 50% ik krijg hetzelfde resultaat.

    ik begrijpt niet hoe het komt dat . bij header images van de website ik heb het hoogte op 750px gezet en allemaal blijven 750px.

    geheel code van home pagina is :

    
    

    .flex-container-home-page-section1{
    width:100%;
    margin-left:4%;
    margin-right:4%;
    max-height:389.25px;
    display:flex;
    flex-direction:row;
    margin-top:10.5rem;

    }

    .home-page-section1-left-side {
    max-height:389.25px;
    width:46%;
    background-color:#45accb;
    color:#FFFFFF;
    padding-left:25px;
    padding-right:25px;

    }

    .home-page-section1-left-side-title {
    font-size:1.75rem;
    color:#FFFFFF;
    font-family: ‘Ravi Prakash’, cursive;
    margin-top:26.5px;

    }

    .home-page-section1-left-side-link {
    display:flex;
    background-color:#4b5054;
    opacity:80%;
    color: #FFFFFF;
    margin-top:22px;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-family: ‘Ravi Prakash’, cursive;
    cursor: pointer;
    width:55%;
    height:45px;

    }
    .home-page-section1-right-side{
    max-height:389.25px;
    width:46%;
    margin-left:0%;

    }

    .flex-container-home-page-section2{
    width:100%;
    margin-left:4%;
    margin-right:4%;
    /*height:389.25px; */
    display:flex;
    flex-direction:row;
    margin-top:5rem;

    }

    .home-page-section2-left-side {

    width:46%;

    }

    .home-page-section2-right-side{

    width:46%;
    background-color:#4b5054;
    opacity:80%;
    padding-top:25px;
    padding-left:25px;
    padding-right:25px;
    color:#FFFFFF;
    }

    .home-page-section2-right-side-title {

    font-size:1.75rem;
    color:#FFFFFF;
    font-family: ‘Ravi Prakash’, cursive;
    margin-top:6px;

    }
    .home-page-section2-right-side-link{

    display:flex;
    background-color:#45accb;
    color: #FFFFFF;
    margin-top:22px ;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-family: ‘Ravi Prakash’, cursive;
    cursor: pointer;
    width:55%;
    height:45px;

    } `
    dank u wel

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

1 reactie aan het bekijken (van in totaal 1)
  • Thread starter johannes999

    (@johannes999)

    ik heb het probleem opgelost met overflow:hidden.

    .flex-container-home-page-section1{
      width:92%;
    	margin-left:4%;
    	margin-right:4%;
    	max-height:390px !important; 
    	display:flex;
    	flex-direction:row;
     margin-top:10.5rem;
    	
    }
    	
    	.home-page-section1-left-side    {
    
    	width:50%;
    		
       	background-color:#45accb; 
    	color:#FFFFFF;
           padding-left:25px;
    		padding-right:25px;
    		overflow:hidden;
    		
    }
    
    .home-page-section1-left-side-title {
    	font-size:1.75rem;	
    color:#FFFFFF;
    font-family: 'Ravi Prakash', cursive;
    margin-top:26.5px;
    	
    }
    
    .home-page-section1-left-side-link {
    	display:flex;
    	 background-color:#4b5054;
    	 opacity:80%;
       color: #FFFFFF;
      margin-top:22px;
      	justify-content:center;
    	align-items:center;
       font-size: 1.5rem;  
      font-family: 'Ravi Prakash', cursive;
      cursor: pointer;
    	width:55%;
    	height:45px;
    	
    	
    }
    .home-page-section1-right-side{
        
    	width:50%;	
     overflow:hidden;
    
    }
    
    .flex-container-home-page-section2{
      width:92%;
    	margin-left:4%;
    	margin-right:4%;
    	max-height:390px !important; 
     display:flex;
    flex-direction:row;
    margin-top:5rem;
    
    }
    	
    	.home-page-section2-left-side    {
    		
    	width:50%;	
    	overflow:hidden;		
    }
    
    .home-page-section2-right-side{
    
    	width:50%;
    	background-color:#4b5054;
    	opacity:80%;
    	padding-top:25px;
    	padding-left:25px;
    	padding-right:25px;
    	color:#FFFFFF;
    	
    }
    
    .home-page-section2-right-side-title {
    	
    	font-size:1.75rem;	
    color:#FFFFFF;
    font-family: 'Ravi Prakash', cursive;
    margin-top:6px;
    
    }
    .home-page-section2-right-side-link{
    	
    	display:flex;
     background-color:#45accb; 
       color: #FFFFFF;
      margin-top:22px ;
    justify-content:center;
    	align-items:center;
         font-size: 1.5rem;  
      font-family: 'Ravi Prakash', cursive;
      cursor: pointer;
    	width:55%;
    	height:45px;
    	
    	
    }

    dank u wel

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘ik zet hoogte van een klas(heeft 2 gedeeltes) op 389.25 px maar wordt ongelijk?’ is gesloten voor nieuwe reacties.