Bug Report: Border radius on "line" element does not round all corners

[thecashbag]

Just here to report a bug…

Problem: The border radius on the “line” element of the pro content editor only rounds the top-right and top-left corners. The bottom-right and bottom-left corners do not become rounded even when set.

Steps to reproduce:

1. Add the “line” element to the pro content editor
2. Give it a “size” of 50px so you can easily see the problem in the editor
3. Change the border radius to 10px on all corners
4. You will see that only the top-right and top-left corners become rounded

[friech]

Hi There,

Thank you for the heads up, but I can not replicate that bug on my end.

Would you mind providing more information?

Also, please confirm that you are fully updated (PRO v2.2.5)

If you find it to be out of date, you can review our update guide.

Cheers!

[thecashbag]

Hello,

I am using Pro v 2.2.5.

Here is my screenshot, only the top corners are rounded, the bottom ones stay square.

I also have a second problem…

When I create a row with multiple columns the last column never fits on the row, it always drops down underneath instead of shrinking the column to make them all fit on the row. It’s a bit hard to explain so I made a quick screencast: https://www.screencast.com/t/mheywD631VHc

[rad]

Hi @thecashbag,

For border-radius, it’s a bug in the Firefox browser. But, it seems to be correct since the line element is border base (1 side border with 0px height) and the CSS is this

width: 100%;
max-width: 50%;
margin: 65px auto 65px auto;
border-top-width: 40px;
border-style: solid;
border-color: rgb(153, 153, 153);
border-radius: 10px;

Which means, that grey area is just a single border with thick size and there is no content or height at all. While the border-radius is only applicable to visible dimension, then it’s only taking effect to the top border of 40px (as example size). The border-radius will take effect on all sides if it’s not a border, but height like

width: 100%;
max-width: 50%;
margin: 65px auto 65px auto;
height: 40px;
border-color: rgb(153, 153, 153);
border-radius: 10px;

Hence, it’s not an actual bug but just how border-radius works, and of course, chrome behave differently as it counts the border size as the height of the entire element compared to Firefox. The line element is an <hr> element which is by default styled as a border, hence, border-radius shouldn’t work at all. I’ll add this to our issue tracker, but for now, you may add an empty button as a line element replacement (with background and border-radius).

As for the columns, it’s because you added padding and border to the columns. Border and padding increases the dimension of the column. The total width of all columns on the same row should be 100% including margins, but it’s now more than 100% which pushes other columns down. Try setting the border to none and padding to 0.

Thanks!

[thecashbag]

Thanks for the detailed explanations.

For the columns, I want to have multiple “cards” that sit on a row. About 3 or 4 per row. And when the screens shrinks down the cards also become responsive and sit below each other.

Removing the padding and border from the columns (aka the “cards”) will make them look really bad.

Do you have any other suggestions of how to achieve this layout?

[thecashbag]

Ok I got it working… kind of.

I am using this code snippet: https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272

@media (min-width: 768px) {
 .equal-height .x-container {
    display: flex;
 }   
}

It creates equal height columns inside any section with the class equal-height.

Applying that equal-height CSS now makes all columns fit on the same row. The only problem is on mobile screens there is no padding on the right hand side of the columns.

See screenshot here: https://screenshots.firefox.com/te3tWhe72EeLzx9b/wordpress-85855-529249.cloudwaysapps.com

The old logins still work if you want to login and take a closer look at the post in question.

[ruenel]

Hello There,

Thanks for updating in!

You can create a section and a 4 column row. In each of the column, you’ll need to add the card elements. As soon as the screen gets smaller, the columns will collapse and stacked below each other. You can add a bottom margin in the card settings so that the cards will have enough space between each columns.

Hope this helps.

[ruenel]

Hello Again,

You may need to use this custom css as well:

@media(max-width: 767px){
  .equal-height .x-container {
    padding-left: 15px;
    padding-right: 15px;
  }  
}

Hope this helps.

[thecashbag]

Thanks but that has not worked, it still looks the same.

[ruenel]

Hello There,

Please update your code and use this instead:

@media(max-width: 767px){
  .equal-height .x-container {
    display: block;
  }

  .equal-height .x-column.x-sm.x-1-3 {
    margin-bottom: 40px;
    display: block;
    width: auto;
  }
}

Please let us know how it goes.

[thecashbag]

I just got it working with this actually:

.equal-height .x-container {
  display: flex;
}

@media (max-width: 768px) {
 .equal-height .x-container {
    flex-wrap: wrap;
 }
}

[friech]

Glad you figure things out,

Cheers!