My arrow breaks when viewed on bigger screen


I have built an arrow with a text beside it, but when it is viewed on a bigger screen the arrow breaks. I feel it’s easy to fix this but can’t find any solution.

Appreciate any help I can get.

Here is my code:


<div class="arrow">
        <hr class="line"></hr>
        <div class="arrow-right"></div>


.arrow {
  position: relative;
  width: 100%;
  height: 100%;

.arrow h1 {
  font-family: "Catamaran";
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  bottom: 10%;
  right: 16%;

.arrow .line {
  width: 125px;
  position: absolute;
  bottom: 8.5%;
  right: 4.5%;
  border-top: 2px solid #fff;

.arrow .arrow-right {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 14px solid #fff;
  position: absolute;
  bottom: 10.2%;
  right: 3.5%;

Well, let’s do some math.

Your arrow head is 14px wide (because of its border.)

if the window is 1000px wide (for ease of my brain doing maths…):
Your arrow head is still 14px wide, it starts 85 pixels from the bottom, and 45 pixels from the side. Meaning its right side is now at 31 pixels from the side.

Your line starts 102 pixels from the bottom, and 35 pixels from the side.

Not a problem.

Lets crank that up to 2000.
Your arrow head is still 14 pixels wide.
Your arrow head starts at 170 pixels from the bottom, and 90 pixels from the right. Meaning its end point is now at 76px.
Your line starts at 204 pixels from the bottom, and 70 pixels from the right…
Suddenly your arrow head and arrow line dont line up.

Moral of the story: Don’t mix percentages and fixed values (your width is a fixed value). Use fixed values for all of it.

1 Like

Thank for the advice.

Do you have any solutions?
Tried using just fixed values, but did not get it to work.

Without knowing the desired result its hard to give a proper answer.

Lets start with some decent html and some styling and then take it from there. I think you are trying to do something like this.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
body {
.explore {
	font-family: "Catamaran";
	color: #fff;
 	font-size: .9rem;
	font-weight: bold;
	margin:1rem auto;
.explore:after {
	width: 125px;
.explore:before {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid #fff;
	position: absolute;
	margin:auto 0;

<h1 class="explore">Explore</h1>

Note no erroneous html elements have been used but it all depends on what usage this element has and how it needs to behave?

The above should give you a start anyway.

1 Like

Thank you so much!

Learned something new today.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.