there is white space vertically between the texts in chrome but not in firefox?

  • Resolved johannes999

    (@johannes999)


    1 year, 6 months ago

    Hallo,

    this is the code :

    .box-container {
  width: 100%;
  height: 100px; 
  border: 1px solid #4b5054;  
  background-color: #4b5054;
  display: flex;
  flex-direction:row;  
  overflow:hidden;
}

.item {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  width: 100%; 
  display:none; /* hide all items initially */
 
	 
}

.item.active {
  opacity: 1;
	display: flex; /* Show the active item */
	flex-direction:column;
}
		
		.item1 h2 {	
			display:flex;
			justify-content: center;
            align-items:center;
            text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
         color:#ffd978;
				font-family: 'Ravi Prakash', cursive;
		}
		.item2 h2{
			display:flex;
			justify-content: center;
              align-items:center;
             text-align: center;
			margin-top:0.5rem;
			 font-size: 1.4rem;
          color: #ffd978;
		font-family: 'Ravi Prakash', cursive;
		}
		
		.item3 h2 {	
		display:flex;
		justify-content: center;
        align-items:center;
          text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
        color: #ffd978;
			font-family: 'Ravi Prakash', cursive;
		}
		


.item p {
	display:flex;
		flex-direction:column;
		justify-content: center;
	     text-align: center;	
  font-size: 1rem;
  line-height: 0.8;
  color: white;  
  margin-top:-0.35rem;
	font-family: 'Ravi Prakash', cursive;
}

.item p1 {
	
	display:flex;
		justify-content: center;
              text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color:white;
  margin-top:-1.5rem;  
	font-family: 'Ravi Prakash', cursive;
}

.item p2 {
	display:flex;
		justify-content: center;
	text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color: white;
  margin-top:-0.05rem;
	font-family: 'Ravi Prakash', cursive;
}

    when I open the home page in firefox under 380px it is OK.

    but when I open the same page in chrome under 380px there is white space vertically in the texts : Direct-bellen and Tel:xxxxxxx

    opening tijden and ma t/m vridag etc.

    How I can solve this problem?

    do I have to use webkit to solve this problem . if yes!

    what is the syntax and where do I have to insert it?

    I am writting media queries and this problem is under 380px when you open inspect elements.

    thanks

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter johannes999

    (@johannes999)

    I have inserted row class like this:

    <div class="box-container">	
		
<div class="item item1 active">
		<div class="row1">		
 <h2>Direct-Bellen</h2>  <br>
	<p>Tel:0zz-4xx12xc </p> <br>
	<p1> Mob:064xcyesdg </p1> 

</div> </div>
		
		
<div class="item item2">
	<div class="row2">
<h2>Openingstijden</h2> <br>
<p>Ma t/m vrij 08:00 -18:00 </p> <br>	
	<p1>Zaterdag 08:30 -12:00 </p1>
      <p2> Zondag Gesloten</p2>
	</div>  
	</div>
		
<div class="item item3">
<div class="row3">	
<h2>Adres</h2> <br>
<p>KLoaaaaamzp 122 </p> <br>
	<p1>3156XX XXXCVLIXT </p1>
			
	  </div>
		</div>
		</div>

    and the css:

    	.box-container {
  width: 100%;
  height: 100px; 
  border: 1px solid #4b5054;  
  background-color: #4b5054;
  display: flex;
  flex-direction:row;  
  overflow:hidden;
}

.item {
  opacity: 0;
	width:100%;
  transition: opacity 1s ease-in-out;
   display:none; /* hide all items initially */

	
}

.item.active {
  opacity: 1;	 
   	display: flex; /* Show the active item */

}
		.row1 {
		width:100%;
		display:flex;
		flex-direction:column;	
		}	
		
		
		.row2 {
		width:100%;
		display:flex;
		flex-direction:column;	
		}	
		
		
		.row3 {
		width:100%;
		display:flex;
		flex-direction:column;	
		}	
		
		
	  
		
		
		
		
		.item1 h2 {				
			display:flex; 
			justify-content: center;
            align-items:center;
            text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
         color:#ffd978;
				font-family: 'Ravi Prakash', cursive;
		}
		.item2 h2{
		
			display:flex;
				justify-content: center;
              align-items:center;
             text-align: center;
			margin-top:0.5rem;
			 font-size: 1.4rem;
          color: #ffd978;
		font-family: 'Ravi Prakash', cursive;
		}
		
		.item3 h2 {
	
		display:flex;		
		justify-content: center;
        align-items:center;
          text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
        color: #ffd978;
			font-family: 'Ravi Prakash', cursive;
		}
		


.item p {
	
	display:flex;	
		justify-content: center;
	     text-align: center;	
  font-size: 1rem;
  line-height: 0.8;
  color: white;  
  margin-top:-0.35rem;
	font-family: 'Ravi Prakash', cursive;
}

.item p1 {
	
	display:flex;		
		justify-content: center;
         text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color:white;
  margin-top:-1.5rem;  
	font-family: 'Ravi Prakash', cursive;
}

.item p2 {
	
	display:flex;	
	justify-content: center;
	text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color: white;
  margin-top:-0.05rem;
	font-family: 'Ravi Prakash', cursive;
}

    but the problem is the same . on firefox it is looking very wel but on Chrome there is white spaces between the columns.

    I tried to use webkit with display flex and flex-direction it didn’t help either.

    I want to be sure is this problem can be solved with webkit or the problem is in coding somewhere?

    thanks

    Thread Starter johannes999

    (@johannes999)

    I have solved this puzzle like this.

    first I added row class:

    	<div class="box-container">	
			
			
<div class="item item1 active">	
	<div class="row">
 <h2>Direct-Bellen</h2>  <br>
	<p>Tel:0zz-4xx12xc </p> <br>
	<p1> Mob:064xcyesdg </p1> 

		</div>  </div>
		
			
<div class="item item2">
	<div class="row">
<h2>Openingstijden</h2> <br>
<p>Ma t/m vrij 08:00 -18:00 </p> <br>	
	<p1>Zaterdag 08:30 -12:00 </p1>
      <p2> Zondag Gesloten</p2>
	</div>  </div>
		
<div class="item item3">
	<div class="row">
<h2>Adres</h2> <br>
<p>KLoaaaaamzp 122 </p> <br>
	<p1>3156XX XXXCVLIXT </p1>
			
	  </div>
		</div>
		</div>

    and I made CSS like this:

    .box-container {
  width: 100%;
  height: 100px; 
  border: 1px solid #4b5054;  
  background-color: #4b5054;
  display: flex;
  flex-direction:row;  
  overflow:hidden;
}

.item {
  opacity: 0;
	width:100%;
  transition: opacity 1s ease-in-out;
   display:none; /* hide all items initially */

	
}

.item.active {
  opacity: 1;	 
   	display: flex; /* Show the active item */
}
		.row {
	  
		width:100%;

		}	
		
		
		
		
	  
		
		
		
		
		.item1 h2 {				
			display:flex; 
			justify-content: center;
            align-items:center;
            text-align: center;
				flex-direction:column;
		margin-top:0.5rem;
		 font-size: 1.4rem;
         color:#ffd978;
				font-family: 'Ravi Prakash', cursive;
		}
		.item2 h2{
		
			display:flex;
			flex-direction:column;
				justify-content: center;
              align-items:center;
             text-align: center;
			margin-top:0.5rem;
			 font-size: 1.4rem;
          color: #ffd978;
		font-family: 'Ravi Prakash', cursive;
		}
		
		.item3 h2 {
	
		display:flex;
			flex-direction:column;
				justify-content: center;
        align-items:center;
          text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
        color: #ffd978;
			font-family: 'Ravi Prakash', cursive;
		}
		


.item p {
	
	display:flex;	
		justify-content: center;
	     text-align: center;	
  font-size: 1rem;
  line-height: 0.8;
  color: white;  
  margin-top:-1.75rem;
	font-family: 'Ravi Prakash', cursive;
}

.item p1 {
	
	display:flex;		
		justify-content: center;
         text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color:white;
  margin-top:-2.75rem;  
	font-family: 'Ravi Prakash', cursive;
}

.item p2 {
	
	display:flex;	
	justify-content: center;
	text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color: white;
  margin-top:-0.05rem;
	font-family: 'Ravi Prakash', cursive;
}

    I set the row only width:100% otherwise it is deforming.

    I solved in the end after trying every possible situation.

    now it looks in chrome and firefox the same.

    thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘there is white space vertically between the texts in chrome but not in firefox?’ is closed to new replies.