[Resolved] Help with text in Gutenberg

[Pedro]

Hello! I currently use Gutenberg to design the pages on my site.

I would like you to help me customize a section that I am doing.

I am trying to put a header (h2) before showing some products.

I would like after the title to put a “See More” link that redirects to a new page.

Something like Amazon does: https://mega.nz/#!q09lALJI!QWvUScWit6yDevjIlJ-wEOtW3TpVuJXwAEknyyoowjU

If you notice, just after the header they put the link the way I want to do it.

The point is, I don’t know how I can do it.

Can you help me? Thank you!!

[David]

Hi there,

try this:

1. Add this CSS to your site:

.linked-heading,
.linked-heading + p {
    display: inline-block;
}
.linked-heading + p {
    margin-left: 2ch;
}

2. In the Block editor add a H2 Heading Block, followed by a text block to contain your link.

3. Select the Heading Block, on the Settings Sidebar > Advanced -> Additional CSS Class add: linked-heading

[Pedro]

Hello david! It worked perfectly, you are the best !!

However, I notice that by adding all this, the space between the header and the products is reduced.

I don’t want this to happen.

Can you help me?

Thank you!

[David]

Made a slight adjustment to the CSS here – try that 🙂

[Pedro]

Hey David! You are a magician, I pay you my respects.

The fix worked perfectly.

Thank you!

[David]

You’re welcome

[Pedro]

Update: With the new CSS now the link “See more” is ALWAYS placed a line under the heading if it is very long (in the mobile version)

Even if there is space to appear on the second line of the header.

Here’s a screenshot: https://mega.nz/#!X8FlHA4K!2U2-_i3W0-ZXn_Aq1gSfoN3131hHc03p6WOMWXkW50c

[David]

Try this CSS:

@media (max-width: 768px) {
    .linked-heading {
        max-width: 70%;
        float: left;
    }
}

[Pedro]

Hello David! I have added the new CSS and what I get with this is that the header is clipped for each line which leaves room for the link.

Here’s a screenshot: https://mega.nz/#!DgUAnIyJ!wpiSmMCaXBI5O9QT-AwI_b_ueTD4Ra8vApBxQI076zg

What I really want is for the link to just stick to the end of the last word in the header if it has space.

Something more or less like this: https://mega.nz/#!GkFQGYha!izfN91Nxaremc0ATyS4dYWRTxJPbcAGdtSjaCgNYHKM

[David]

OK so remove the CSS and remove the text block containing your link.

Edit your Heading and include the text for your link at the very end, highlight it and select the link option in the tool bar.

Then add this CSS:

.linked-heading a {
    font-size: 16px;
    margin-left: 2ch;
}

Adjust the font-size and space accordingly.

[Pedro]

Hello David! It worked exactly as I wanted, you are the best !!

Thank you.

[David]

Glad to be of help

[Pedro]

Hello David! Sorry to be a bother, I am telling you that the latest code works for most mobile devices.

There is no problem for the desktop version.

However for small screens like iPhone 5 or 6, customization doesn’t look very good.

Here you can see them:

iPhone 5: https://mega.nz/#!788liABK!mUsoFVAcWatb5ACuUKYaUl2m1p8EjN98gEfV1lE_8jQ
iPhone 6: https://mega.nz/#!ax0lUCiJ!1RhznhS8f0NS5Ozg0S5H7l_fE4XJunaL4FIVK9nQGRs

What occurred to me then is to do the above customization, which ALWAYS showed the link on the right side and if the header was too long I divided it into 2 lines.

I am talking about this code:

@media (max-width: 768px) {
    .linked-heading {
        max-width: 70%;
        float: left;
    }
}

It looked like this: https://mega.nz/#!DgUAnIyJ!wpiSmMCaXBI5O9QT-AwI_b_ueTD4Ra8vApBxQI076zg

What could be done from that code would simply be showing the link on the right side, but that it was aligned to the margin of the site.

In other words, it would look like this: https://mega.nz/#!CxtlHITT!hoxwaQF-56drX25hMkkd0w8Xy3ikpkJRLUfKxiRTFoM

The other option is that if the header is too long, and the link is affected, have the last word before the header go to a second line along with the link.

¿Can you help me, David?

[Tom]

Hey Pedro,

What would you want it to look like, exactly? Would the title having a max-width with the link being next to the title (not all the way to the right) work better?

[Pedro]

Hello Tom! Thanks for answering.

I consider that the easiest and most successful option is the one you suggest.

Can you help me with this?

[Author]

Posts