Couple of issues with icon when used on a button

[core365]

Hi, I’ve created a button which is black and stretches the full width of the column and has an icon arrow to the right with a blue background. Would you be able to help me with the following 2 issues please:

1. I want the blue background on the icon to stay aligned to the right, but when the screen is resized to view on various screen sizes, you can see the black background of the main button to the right of it. I’ve tried to do my own CSS with float right and text align right etc, but nothing works! Here’s a screen grab for your reference:

2. I want the blue background on the icon to fill the height of the button, but when the screen is resized to view on various screen sizes, the blue background doesn’t stretch to fill the height, instead you see the black background at the top and bottom of it. Here’s a screen grab for your reference:

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[thai]

Hi There,

Please try adding this custom CSS:

.page-id-85 .x-anchor-content {
    min-height: 48.5px;
}

.page-id-85 .x-graphic {
    position: absolute;
    right: 0
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[core365]

Hi, thanks for that, it’s sorted the first issue, but there’s still the second issue with the blue background not stretching to fill the height when viewed at a different screen size.

Thanks!

[thai]

Hi There,

Please update the previous CSS to this:

.page-id-85 .x-anchor-content {
    min-height: 48.5px;
}

.page-id-85 .x-graphic {
    position: absolute;
    right: 0;
    height: 100%;
}

.page-id-85 .x-graphic i {
    height: 100% !important;
}

Hope it helps

[core365]

Brilliant, spot on! Thank you so much with all your help on this!

Thanks!

[christian]

You’re welcome. For future proofing purposes, I’d just recommend that you replace the page-id-85 with the class of your section, row or column because the Button element is not the only element with a graphic option and that code will target them as well.

I’m going to post an update here also showing the correct setup which currently only require 2 rules of CSS and I’ll also post this case as feature request so this will be taken into consideration in the future.

Thanks.