Hi, so I have a specific theme I'm going for on my website which is to have some columns with the bottom 2 corners being rounded, while other columns having the top 2 corners rounded. I can't get this to work because I don't know what to put in the css to style each of them (see images) since once I say for a column to have both bottom corners rounded, it automatically applies to all other columns too.
For this page: https://www.alexpopian.com/, in the services part, I want the top corners to be rounded 10 px and the bottom ones to be 0 px (the way it is right now).
The column on the first page has the class name "proj-info"
The two columns on the second page have the class names "services-one" and "services-two" respectively.
Thanks a lot for the help, really appreciate it! :)
I have already tried that before, but when I do that, it affects the other page as well. So if I make the bottom radius 10px for services-two, then proj-info also gets it's border rounded. And if I put border radius to 0 for proj-info then it makes it zero for services-two as well.
Hi, so I have a specific theme I'm going for on my website which is to have some columns with the bottom 2 corners being rounded, while other columns having the top 2 corners rounded. I can't get this to work because I don't know what to put in the css to style each of them (see images) since once I say for a column to have both bottom corners rounded, it automatically applies to all other columns too.
Hey XZhayle ,
Please provide the page URL so I may write up the custom CSS for this request.
Thanks
ThemeNectar Support Team
Hi,
For this page: https://www.alexpopian.com/portfolio/cpe-westmount/ I want the top corners to be 0px and the bottom 2 to be 10px each.
For this page: https://www.alexpopian.com/, in the services part, I want the top corners to be rounded 10 px and the bottom ones to be 0 px (the way it is right now).
The column on the first page has the class name "proj-info"
The two columns on the second page have the class names "services-one" and "services-two" respectively.
Thanks a lot for the help, really appreciate it! :)
Hi There,
Please try this css:
.wpb_column .column-bg-overlay, .wpb_column .column-bg-overlay-wrap, .services-two {border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
Thanks.
Hi Judith,
I have already tried that before, but when I do that, it affects the other page as well. So if I make the bottom radius 10px for services-two, then proj-info also gets it's border rounded. And if I put border radius to 0 for proj-info then it makes it zero for services-two as well.
Hi XZhayle,
Please send in your admin login credentials so that we can look into this further.
Thanks.
Hey Again,
You only need to target the Column Extra Classes as below for it to work.
.proj-info .column-bg-overlay, .services-one .column-bg-overlay-wrap{ border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; }Thanks
ThemeNectar Support Team
Hi,
That worked! For anyone else who has this problem, you have to put the extra class name first, then the column.
Here's what worked for me in the end:
.services-col .column-bg-overlay, .services-col .column-bg-overlay-wrap { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } .proj-info .column-bg-overlay, .proj-info .column-bg-overlay-wrap{ border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; }Thank you so much for all your help!