[Support request] Headline Link Issue

[Alec]

Hi Team,

I have been adding amazon links to my Generatepress headlines as in-text links but the longer amazon links seem to screw up the formatting on the page. Anytime a longer affiliate link is added, the link is not contained within the highlighted text. Instead you can click on the link in whitespace next to the highlighted text and it screws up the text alignment. Please see details of page in private info section.

Thanks,

Alec

https://www.amazon.com/Sun-Mountain-ClubGlider-Meridian/dp/B0118E44KI?&linkCode=ll1&tag=golfible09-20&linkId=c789e3cf845a006adea984ff62367505&language=en_US&ref_=as_li_ss_tl to Headline

[David]

Hi there,

you have this CSS on your site:

a[href *='amazon'] {
    display: block;
    text-align: center;
}

Which is causing the layout issue.

That code would have been added for another purpose, can i see a page where its being used for good reason ?

[Alec]

Thanks for the quick response, ah yes this was being used to center affiliate amazon images that are input using the custom HTML function in Generateblocks. When i add the custom HTML, (i have left example of amazon HTML below) the image doesn’t align in the center. I didnt know a quick or better way of aligning the HTML images. This custom HTML is added on the same page as i sent previously for the images you see in the 3 columns just under the Picks section i noted earlier.

[David]

For future reference the GB Container Block has its own Text Align options in its toolbar.
You can use that to align all of the content inside it.

For now you can try replacing:

a[href*="amazon"] {
    display: block;
    text-align: center;
}

with:

figure > a[href*="amazon"],
div > a[href*="amazon"] {
    display: block;
    text-align: center;
}

It will only apply to links directly inside a container or a figure

[Alec]

Great thanks for your help David

[David]

You’re welcome

[Author]

Posts