Skip to content
OverviewSolutions
7
Comments
2

BrandonSdvl

@BrandonSdvlMéxico240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • BrandonSdvl•240
    @BrandonSdvl

    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
  • BrandonSdvl•240
    @BrandonSdvl
    • 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