CODEWITHSUNDEEP
htmlcssresponsive-design
Szarlotka
Szarlotka

Reputation: 27

Creating dots with ::after and making it responsive

I have to code that design. I don't know what to do with these dots. I am wondering if there is a better way to code this... it has to be responsive also (if the screen is smaller I want these dots to be below the div.box). Link to my codepen: https://codepen.io/confuze/pen/jOYgqKO

.box:not(:last-child)::after {
  content: "..............";
  color:#8C4AF2;
  font-size: 2rem;
  position: absolute;
  left: calc(100% + 10rem);
  top: 50%;
  transform: translate(-50%, -70%);
}

my design

Upvotes: 0

Views: 142

Answers (2)

Johannes
Johannes

Reputation: 67799

Instead of using pseudo-elements, I would use additional divs between the main divs which have a dotted border-top, zero height, are positioned at the vertical middle of the main divs and are allowed to grow and shrink (other than the "main divs", which should have a fixed width), including min- and max-width.

For responsiveness, I'd use a media query where below a certain width the flex-direction is column instead of the default row, and where the in-between divs have a dotted border-left instead of border-top, zero width and a flexible height including a min-height and max-height.

Added after comment:

body {
  background-color: #0B021F;
}
.container {
  display:flex;
  justify-content: center;
  align-items:center;
  margin-top:5em;
  flex-wrap:wrap;
  gap: 2rem;
}

.box {
  background-color:white;
  width:6rem;
  height:6rem;
  border-radius:1rem;
  position: relative;
}

.dots {
  height:0;
  min-width:3rem;
  max-width: 10rem;
  border-top:5px dotted #8c4af2;
  flex: 1 1 auto;
}

@media only screen and (max-width:700px) {
  .container {
    flex-direction:column;
  }
  
  .dots {
    border-top:0;
    border-right:5px dotted #8c4af2;
    min-height:6rem;
    min-width:0;
  }
}
<div class="container">
  <div class="box"></div>
  <div class="dots"></div>
  <div class="box"></div>
  <div class="dots"></div>
  <div class="box"></div>
</div>

Upvotes: 2

cheesyMan
cheesyMan

Reputation: 1520

Why not try with a simple @media query? Just modified your codepen a bit here.

@media screen and (max-width: 945px) {
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
    flex-wrap: wrap;
    gap: 15rem;
    flex-direction: column;
  }

  .box:not(:last-child)::after {
    content: "..............";
    color: #8c4af2;
    font-size: 2rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: rotate(90deg) translate(90%, 125%)  ;
    color: red;
    
  }
}

@media screen and (min-width: 945px) {
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
    flex-wrap: wrap;
    gap: 20rem;
    flex-direction: row;
  }
  .box:not(:last-child)::after {
    content: "..............";
    color: #8c4af2;
    font-size: 2rem;
    position: absolute;
    left: calc(100% + 10rem);
    top: 50%;
    transform: translate(-50%, -70%) ;
  }
}

Upvotes: 1

Related Questions