Classic Featured Headline- text and icon overlap

Support
#1

feat

Hi there,

I am experiencing problem where the text seems to be overlapping the icon.

Right now I have added the CSS code below for the icons on the left but I am not sure where I should be adjusting so that the text and the icon won’t overlap.

.h-feature-headline.icon-right span {
padding-left: 0;
padding-right: 1.5em;
}

.h-feature-headline.icon-right span i {
left: auto;
right: 0;
font-size:19px;

#2

Hello @Mesh,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take closer look?

Thanks.

#3

Hi Prasant,

This is the link

https://test.foodmesh.ca/features-2/

#4

Hello There,

Please update your code and use this:

.h-feature-headline.icon-right span {
    max-width: calc(100% - 30px);
}

We would loved to know if this has work for you. Thank you.

#5

Hi RueNel,

Thank you! it worked for the spacing but now the icon moved to the right of the text.

Also I realized when I viewed it on the phone the two columns align vertically instead of parallel alignment as seen on the desktop screen.

#6

Hello There,

Please have the css code updated and use this:

.h-feature-headline.icon-right span {
    max-width: calc(100% - 30px);
    padding-left: 0;
    padding-right: 1.5em;
}

.h-feature-headline.icon-right span i {
    position: absolute;
    top: 20%;
    right: 0;
    left: auto;
}

Please let us know how it goes.

#7

yes it did! Thank you

#8

You’re welcome!
We’re glad we were able to help you out.

#10

Hi again RueNel,
How do I adjust the text alignment to justify and increase the icon size?

Thank you.

#11

Hi there,

You can change your CSS to this with your preferred icon size

.h-feature-headline.icon-right span {
    max-width: calc(100% - 30px);
    padding-left: 0;
    padding-right: 1.5em;

text-align: justify; /* justify it */

}

.h-feature-headline.icon-right span i {
    position: absolute;
    top: 20%;
    right: 0;
    left: auto;

font-size: 30px; /* icon size */

}

Thanks!

#12

Thank you!

#13

You’re welcome!

#14

Hi there,

Sorry to ask for help again but the icon and spacing still don’t seem right. I have set the size of icon to 50px but it doesnt look like and the spacing is still off.

#15

Hi there,

The font size mentioned in my colleague code is not there on the website. Would you please kindly get back to us with the URL/User/Pass of your website using the Secure Note to be able to check and see how you added the code?

Thank you.

#16

Hi Christopher,

Yes, just sent it to you.

#17

Hi there,

The code you have added in the custom CSS didn’t work because you have changed the classes for the Feature Headline elements from icon-right to icon-left but you did not update the CSS code.

Instead of using this:

.h-feature-headline.icon-right span {
    max-width: calc(100% - 30px);
    padding-left: 0;
    padding-right: 1.5em;

    text-align: justify; /* justify it */

}

.h-feature-headline.icon-right span i {
    position: absolute;
    top: 20%;
    right: 0;
    left: auto;

    font-size: 30px; /* icon size */

}

You will have to use:

.h-feature-headline.icon-left span {
    max-width: calc(100% - 30px);
    padding-left: 0;
    padding-right: 1.5em;

    text-align: justify; /* justify it */

}

.h-feature-headline.icon-left span i {
    position: absolute;
    top: 20%;
    right: 0;
    left: auto;

    font-size: 30px; /* icon size */

}

It would be ideal to familiarize yourself with CSS so that you will be able to add the customizations for your site correctly.

Here are some links:

https://www.w3schools.com/css/css_intro.asp

Hope this helps.

#18

Thank you for the suggestion!

#19

We are delighted to assist you with this.

Cheers!

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.