Asked
Viewed16 times
How to make the <dash>
automatically increase the height with respect to <text>
and <subtext>
like in mobile device ?
Also, how to fit the content of <text>
and <subtext>
to the <wrapper>
class ? Right now, it horizontally overflows and breaks it. The code right now is non-responsive in essence. I’ve tried using width with fixed px but it’s too troublesome to accomodate all devices.
.main .circle{
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
text-align: center;
font-size: 1.7em;
color: white;
/* display: inline-block; */
border: black 2px solid;
}
.main .one{
background: #BDB3FF;
/* display: inline-block; */
}
.main .two{
background: #6F42C1;
/* display: inline-block; */
}
.main .three{
background:#413687;
}
.main .wrapper{
border: black 2px solid;
/* display: inline-block; */
}
.main .dash {
--s:15px; /*control the space between dashes */
border: black 2px solid;
position: relative;
left: 25px;
--s:15px;
height: 6px;
width: 6px;
height: 180px;
/* display: inline-block; */
background:
radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}
.main .dash_one{
background:
radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}
.main .dash_two{
background:
radial-gradient(circle closest-side,#6F42C1 98%,#0000) 0 0/100% var(--s),
linear-gradient(#6F42C1 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
height: 220px;
}
.main .dash_three{
height:250px;
}
.main .subtext{
width:650px;
border: black 2px solid;
display: inline-block;
font-size: 2em;
position: relative;
left: 20px;
}
.main .text{
width: max-content;
color: black;
display: inline-block;
position: relative;
left: 50px;
bottom: 30px;
}
<div class="main">
<div class="wrapper">
<div class="circle one">1 <span class="text">Post Your Question</span></div>
<div class="dash dash_one">
<span class="subtext">Just attach your assignment/question along with the reference materials or any specific guideline/requirement. select your deadline and submit it to get assignment help
</span>
</div>
<div class="circle two">2 <span class="text">Pay To Get Assignment Help</span></div>
<div class="dash dash_two">
<span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
</span>
</div>
<div class="circle three">3 <span class="text">Get Assignment Solution</span</div>
<div class="dash_three">
<span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
</span>
</div>
</div>
</div>
2
One way is to use flex boxes and don’t use pixel sizes
.main
{
--circle-size: 2em;
font-family: arial;
font-size: 1.5em;
}
.main .circle{
border-radius: 50%;
min-width: var(--circle-size);
height: var(--circle-size);
line-height: var(--circle-size);
text-align: center;
font-weight: bold;
color: white;
/* display: inline-block; */
/*border: black 2px solid;*/
}
.main .one{
background: #BDB3FF;
/* display: inline-block; */
}
.main .two{
background: #6F42C1;
/* display: inline-block; */
}
.main .three{
background:#413687;
}
.main .wrapper{
/* border: black 2px solid; */
/* display: inline-block; */
}
.main .dash /* changed */
{
display: flex;
}
.main .dashes { /* new */
--s:15px; /*control the space between dashes */
/* border: black 2px solid; */
--s:15px;
--dash-width: 6px;
min-width: var(--dash-width);
/* display: inline-block; */
background:
radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
/* added */
display: inline-block;
margin: 0 calc((var(--circle-size) - var(--dash-width)) / 2);
vertical-align: top;
}
.main .dash_three > .dashes
{
border: 0;
background: 0;
}
.main .dash_one{
background:
radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}
.main .dash_two{
background:
radial-gradient(circle closest-side,#6F42C1 98%,#0000) 0 0/100% var(--s),
linear-gradient(#6F42C1 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
/* height: 220px;*/
}
/*
.main .dash_three{
height:250px;
}
*/
.main .subtext{
/* border: black 2px solid; */
display: inline-block;
margin: 0.5em 0 1em 0.5em;
/* removed */
/*
width:650px;
position: relative;
left: 20px;
*/
}
.main .text{
/* width: max-content; */
color: black;
display: inline-block;
font-weight: bold;
margin: 0 0 0 0.5em;
/*
position: relative;
left: 50px;
bottom: 30px;
*/
}
.main .headline
{
display: flex;
align-items: center;
}
<div class="main">
<div class="wrapper">
<div class="headline">
<div class="circle one">1</div>
<span class="text">Post Your Question</span>
</div>
<div class="dash dash_on">
<span class="dashes"></span>
<span class="subtext">Just attach your assignment/question along with the reference materials or any specific guideline/requirement. select your deadline and submit it to get assignment help
</span>
</div>
<div class="headline">
<div class="circle two">2</div>
<span class="text">Pay To Get Assignment Help</span>
</div>
<div class="dash dash_two">
<span class="dashes"></span>
<span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
</span>
</div>
<div class="headline">
<div class="circle three">3</div>
<span class="text">Get Assignment Solution</span>
</div>
<div class="dash dash_three">
<span class="dashes"></span>
<span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
</span>
</div>
</div>
</div>
Not the answer you’re looking for? Browse other questions tagged css or ask your own question.
default