Hi there,
I don’t understand why I can still see the black background at the corners when I try to use the Content Area Modal:
What should my settings be to make it flush with the border?
Thank you 
Hello @artthescience,
Thanks for writing in! You are seeing the black area in between the corners because the outer container and the inner container does not have the same border-radius settings. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
Thank you Ruenel.
I don’t think we need to access my site to help me
If my border settings are for example at 25px for the Content Area Modal … where else do I need to adjust the border settings? I tried adjusting the column but that didn’t work (see below).
Thank you!
Hey @artthescience,
Please try setting an Inset Box Shadow of 9 EM.
If that doesn’t help, please provide the URL of the page where we can see the issue. Site access is not necessary as long as we can check the live page.
Thanks.
Hey @artthescience,
Thank you for providing the URL. The issue is happening because the child container of the Toggle inherits the border radius of the parent container (which is the Toggle), since you’ve set the border radius to 25px in the Toggle settings, dimensions of your image and the toggle creates this problem, so to fix this you can add the following code in the Element CSS of the Content Area Modal element:
$el.x-anchor-toggle > .x-anchor-content {
border-radius: 0;
}
Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
- Intro to CSS - https://goo.gl/mFuWQT
- How to get CSS selectors - https://goo.gl/BmoH39
- Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
Hope this helps!
Thank you so much! That did the trick
Actually, one issue did just come up. This doesn’t work for mobile or tablet, it does work in desktop (the photo corners are on top of the border):
Thank you so much!
Hey @artthescience,
I checked your page in couple of mobile devices and I’m not seeing any issue on my end perhaps this could only be the cache issue, try clearing the browser’s cache of your devices and see if this resolves the issue.
If the issue persists then first remove the Element CSS and then try decreasing the border width (currently set to 5px, you can decrease it to 4px or less) and increase the border radius from 25px to a higher number.
To completely fix the issue you can make your images circular by setting the border radius to 50%
Let us know how this goes!
Thank you for your help!
I have been clearing the cache so that’s not the issue.
I removed the CSS, and used 3px and 30px … there is still a space between the image and the border:
Thank you so much for helping!
I should note that this issue does not happen when I use your Classic Feature Box element, but I need the modal for extra information. I cannot use circles for this because one of my images will get cut off.
Would you mind posting an image of what you see on mobile? Both my iphone and ipad show the overlap even when cache is cleared.
For now, I took the borders off entirely and left the corners rounded. Hopefully we can find a solution. I really appreciate your help!
Just an FYI: The same thing happens with just a regular Image element and rounding corners and borders. The border rounds but the image corners don’t:
Hey @artthescience,
I tested in android devices and iOS simulators and couldn’t replicate the issue, this is what I see in both android and iOS simulator:
The issue actually happens due to the proportion of the border radius and the image size, you could resize your image to the size of the one that is working fine.
You could also remove the border radius completely to avoid such issues.
For the regular Image element, you need to set Outer Border Radius as well as Inner Border Radius (see screenshot)
Hope this helps!
Thank you very much Nabeel!
I get the space in the corner issue when I use the outer/inner space settings:
Not sure what is happening because the Classic Feature Box element handles this really well.
Hey @artthescience,
As per my test this happens due to the proportion of the border radius and the image size. For example you can fix the issue in the Image element by reducing the Inner Border Radius as compared to Outer Border Radius (see screenshot)
Now you probably can apply the same fix for your content area modal elements as well, for example if you have set the border radius 25px then in the Element CSS you could add the following code:
$el.x-anchor-toggle > .x-anchor-content {
border-radius: 20px;
}
The border-radius: 20px; in the above code is just experimental you can adjust it till the you don’t see the spaces between the border and the image.
Hope this helps!
Glad that we could be of help.
Cheers!