All comments

• 

  Yeimy• 365

  @Yeimy7

  Submitted over 2 years ago

  Hi, this is my solution. Something to improve? any feedback are welcome =D

  

  Space-tourism-website - HTML, CSS Grid/Flex and Vanilla JS

  3

  3

  0

  

  BrandonSdvl• 240

  @BrandonSdvl

  Posted over 2 years ago

  Hello! My only suggestion is that if you want the border-bottom from active link to be inside the menu you can add a transparent border like this:

  .menu {
    border-bottom: 3px solid transparent;
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  -Lion-• 235

  @Lio-n

  Submitted over 2 years ago

  Hi How do I add separators between the items? Thx.

  

  Ip Address Tracker

  1

  2

  0

  

  BrandonSdvl• 240

  @BrandonSdvl

  Posted over 2 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

  This comment has received 1 replyShow