Site logo

Archived topic

Issue with GB Blocks - Border radius

15 replies · Started by Fabien on April 11, 2021

Viewing posts 1–15 of 16

Hi,

I've found an issue when using border radius on GB Blocks. In order to reproduce :

- Create a container
- Change background color to black (or another color)
- Apply a border radius to the container
- Add a background image (pseudo element) with opacity 0,5 for example
- Change the border radius of the container on mobile to 0

Result :

As you can see, the border-radius is removed but only on the container and not on the pseudo element :

Thus it creates an empty space on the corner where you can see the black background.

Let me know if you have any questions.

Hi there,

Did you attach any image? It doesn't seem to be displaying properly.

If you need to upload screenshots for explanations, you can use a cloud service like Postimages or Imgur.

Hi Elvin,

Please find the images in the private info

Hi Fabien,

I tried to replicate your issue, but I couldn't.

Could you link us to the site in question and point us to the container that has the issue?

Let me know :)

Please find the URL in the private information. This is happening in the hero section.

Hi there,

I've tried replicating this as well but I wasn't able to. See my site here: https://dev-generate-press.pantheonsite.io/

Can you share the exact setting of the container within the Block Element?

Reminder: Please make sure to clear cache and/or disable caching plugin when debugging. :)

Hi Elvin,

This is super weird.

Please find the block setting in the private information.

Please note that I am using :
- GB 1.3.3
- GB Pro 1.0.3
- GP Premium 2.0.0-beta.3 (maybe this is where the issue is)

Hi there,

can you provide the information in the reply - not the Private Information field as that only supports plain text.

<!-- wp:generateblocks/container {"uniqueId":"5499da14","outerContainer":"contained","paddingTop":"120","paddingBottom":"120","paddingTopMobile":"60","paddingBottomMobile":"60","marginTop":"30","marginBottom":"0","marginTopMobile":"0","marginBottomMobile":"0","borderRadiusTopRight":"10","borderRadiusBottomRight":"10","borderRadiusBottomLeft":"10","borderRadiusTopLeft":"10","borderRadiusTopRightMobile":"0","borderRadiusBottomRightMobile":"0","borderRadiusBottomLeftMobile":"0","borderRadiusTopLeftMobile":"0","backgroundColor":"#000000","bgImage":{"id":1852,"image":{"url":"http://mistersafari.com/fr/wp-content/uploads/sites/2/girafe-tanzanie.jpg","height":800,"width":1200,"orientation":"landscape"}},"bgOptions":{"selector":"pseudo-element","opacity":0.4,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"alignment":"center","isDynamic":true,"gpDynamicImageBg":"featured-image","gpUseFallbackImageBg":true,"gpDynamicLinkType":"post","advBackgrounds":[]} -->
<!-- wp:generateblocks/headline {"uniqueId":"830d8fa8","element":"h1","alignment":"center","textColor":"#ffffff","showAdvancedTypography":true,"fontSize":40,"fontSizeMobile":28,"marginBottom":"0","borderRadiusTopLeft":"10","gpDynamicTextType":"title","gpDynamicTextReplace":"Hello World"} -->
<h1 class="gb-headline gb-headline-830d8fa8 gb-headline-text">Hello World</h1>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"76ee1e57","element":"p","alignment":"center","backgroundColor":"#000000","backgroundColorOpacity":0.5,"textColor":"#d0702e","showAdvancedTypography":true,"fontSize":22,"fontSizeMobile":20,"textTransform":"uppercase","marginTop":"30","marginBottom":"0","paddingTop":"5","paddingRight":"20","paddingBottom":"5","paddingLeft":"20","borderRadiusTopRight":"5","borderRadiusBottomRight":"5","borderRadiusBottomLeft":"5","borderRadiusTopLeft":"5","inlineWidth":true,"gpDynamicTextType":"post-meta","gpDynamicTextReplace":"Post meta","gpDynamicTextCustomField":"subtitle"} -->
<p class="gb-headline gb-headline-76ee1e57 gb-headline-text">Post meta</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

Aah ok - so if you have border-radius on desktop and zero on mobile then its not removing it from the pseudo... looks like a bug. Do you want some CSS to fix it in the meantime ?

I can fix with CSS myself ;-)

Would be good to remove the bug !

Yep its on the list to fix now - thanks for finding and reporting it.

Thanks David !

Just a weird thing, @Elvin doesn't seem to have this bug...

Maybe Elvin has some super powers i am not aware of :) We'll do some more testing to make sure it works 100% of the time.

This archived topic is closed to new replies.