Responsive Design @Media

[Rob]

Hey there,

I’ve tried to customize the vertical process line and so far so good. But if check the website’s responsive design, I run into some technical difficulties.

When I hit the breaking point of 992px the grey line underneath the “Test” Headline is still connected to the “1”. I customized the vertical process with an -arrow in order to change the @media but I can’t see my mistake :/

@media (min-width: 992px) {
.process-vertical-arrow .process-step-arrow:before {
width: 2px;
display: block;
background-color: #EDEDED;
position: absolute;
content: ”;
height: calc(0%);
top: 70px;
left: 49.2%;
}

Q1.
Why is the grey line still showing when I’m under 992px?

Q2.
I’m still new to web design and I have a lot to learn. Is there an easy way to convert my idea into action? As a reference, here’s what I wanted to do -> check page (https://www.copecart.com/so-funktioniert-copecart/).

Thanks
-Rob

---

Template Version: Newest

[Support]

Hi,

I hope I could get exactly what you’re trying to do, so please test the following css code:

(css/custom.css)

@media (max-width: 991px) {
	.process-vertical-arrow .process-step-arrow:after,
	.process-vertical .process-step:after {
		display: none;
	}
}

That CSS will remove the vertical lines in small resolutions, keeping just the numbers of the steps.

Kind Regards,

Jonas

---

[Rob]

Hey there,

thanks, it works the vertical line isn’t visible anymore in smaller resolutions.

Can you tell me how I can give each number and vertical line a specific length with larger screens? Each Step has a different size so a one-fit size doesn’t work. I’ve tried to name the “process-vertical” in a unique way like “process-vertical-seo” and add the css settings i want but it doesn’t work :/

Thanks
Robert

---

[Support]

Hello, looking at the HTML that you’re using my suggestion is to create different classes for each step, example:

HTML:

<div class="process process-vertical process-vertical-step-2 py-4">

CSS:

.process-vertical-step-2 .process-step:after {
	height: 300px;
}

Kind Regards,

Jonas

---

[Rob]

Hey,

I didn’t had any time yet to check it.
I’ll get back to you by tomorrow.

Thanks for your help

-Robert

---

[Rob]

Update: I fixed it, thanks for your help.

-Robert from Germany 🙂

---

[Author]

Posts