Ip Address Tracker

Community feedback

• 

  BrandonSdvl•240

  @BrandonSdvlPosted almost 3 years ago

  • You can use the border property in every <li> except the last one and remove the gap from <ul class="card">

  .ipAddress,
  .location,
  .timezone {
  	width: 25%;
  	border-right: 1px solid #969696;
  	/* Replaces the 4rem of the gap */
  		padding-right: 2rem;
  		margin-right: 2rem;
  }
  
  @media (min-width:  800px) {
  	.card {
  		display:  flex;
  		/* gap: 4rem; */
  		text-align:  left;
  		justify-content:  space-between;
  	}
  }
  

  • Or the second option wich is a bit complicated but with this you can control the separator height and make it look like the original design. You just have to add <div class="separator"></div> between every li and adjust your css.

  <ul  class="card">
  	<li  class="ipAddress">
  		<p>IP ADDRESS</p>
  		<h2  class="ipAddress__para bodySize">192.212.174.101</h2>
  	</li>
  	<div  class="separator"></div>
  	<li  class="location">
  		<p>LOCATION</p>
  		<h2  class="location__para bodySize">Brooklyn, NY 10001</h2>
  	</li>
  	<div  class="separator"></div>
  	...
  </ul>
  

  .separator {
  	display:  none;
  }
  @media (min-width:  800px) {
  	.card {
  		display:  flex;
  		gap:  2rem;
  		text-align:  left;
  		justify-content:  space-between;
  		align-items:  center;
  	}
  	.separator {
  		display:  block;
  		height:  80%; 
  		width:  1px;
  		background-color:  #969696;
  	}
  }
  

  This should be enough, but you are using position: absolute on the .card element so... it doesn't work :) But you have a .cont-cart element (I'm not sure what is that for) and you can use position: absolute on it.

  .cont-card {
  	display:  flex;
  	padding:  0  5rem;
  	justify-content:  center;
  	position:  absolute;
  	left:  0;
  	right:  0;
  }
  
  .card {
  	list-style-type:  none;
  	z-index:  1;
  	padding:  2rem;
  	border-radius:  15px;
  	background-color:  #fff;
  }
  

  To avoid this last part you can put a measure in px on the separator height and it would work, but it wouldn't resize if necessary.

  I hope this helps :))

  Marked as helpful

  1

  ---

  

  -Lion-•235

  @Lio-nPosted almost 3 years ago

  Hi, @BrandonSdvl This helped me a lot, I used the second option. I really appreciate it, thank you very much. ;)

  0