Small arrow right side

Hey hannerinc!

Thank you for using Enfold.

Please replace the css code with this.

#top .flex_column.arrow-container {
  position: relative;
  background: #d50d0d;
  border: 4px solid #d50d0d;
  z-index: 9999;
}

#top .flex_column:before {
  display: none;
}

#top .flex_column.arrow-container:before {
    right: auto;
    top: 50%;
    content: "" !important;
    height: 0;
    width: 0;
    position: absolute;
    display: block !important;
    border-style: solid;
    border-width: 12.5px 20px 12.5px 0;
    border-color: transparent #d50d0d transparent transparent;
    left: -20px;
    visibility: visible !important;
    margin-top: -12.5px;
}

Cheers!
Ismael

Hey!

I’m not sure if that’s possible without distorting the image. Please post the actual link to the site so that we can inspect the element. Did you add the image as a column background or as an Image element?

Cheers!
Ismael

Hey!

We can apply a minimum height to the column with the background image so that it will still be visible on smaller screens.

.flex_column.img-arrow {
    min-height: 500px;
}

Adjust the value as needed. You can also use css media queries to adjust the value on different screen sizes.

Cheers!
Ismael

Hi,

It’s possible but it will get distorted on certain screen sizes.

Best regards,
Ismael