[Resolved] Unable to reduce header font size in Merch?

[Akshay]

Hi. I am building a new website using the Merch template. I would like to reduce the font size in H1, as the text is overlapping on the image. I tried to reduce font size in typography, but I wasn’t successful. Can you please suggest a solution?

Website: Tech Hamper

Thanks

[David]

Hi there,

can you disable the SG Optimizer, and then try changing the H1 settings in Customizer > Typography.

[Akshay]

Hi David. That solution worked for me. I just want to know, how can I arrange the H1 text without overlapping on the image?

[David]

So do you want the text to one side ( white background ) and the image next to it ?

[Akshay]

I want the text on the left side and the image next to it.

[David]

Is this just for the Home Page ? If so you would be better off replacing the Header Element and using a Block Element:

https://docs.generatepress.com/article/block-element-overview/

Install the GenerateBlocks Plugin to create a 2 column Grid which you can then add your text and image to.

https://en-gb.wordpress.org/plugins/generateblocks/

[Akshay]

Hi David. Is it possible to reduce the H1 font size only for the homepage? I need the text next to the image. Also, I don’t want to replace the header element into block element.

[David]

Creating a 2 column header element so the text sits in one column and the image in another is doable – but it requires HTML. You would need to edit the Header Element and add this HTML instead:

<div class="hero-grid">
    <div class="hero-image">
        {{custom_field._thumbnail_id}}
    </div>
    <div class="hero-content">
        <span style="line-height: 1.2em;">a WooCommerce Site for GeneratePress</span>
        <h1>Get Merch</h1>
        <br >
        <a class="button" href="https://gpsites.co/merch/shop">Shop All</a>
    </div>
</div>

Then you require some CSS to make the 2 column layout that will stack on Mobile:

@media(min-width: 769px) {
    .hero-grid {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    .hero-grid>div {
        flex: 1 0 50%;
        padding: 40px;
    }
}

.hero-grid .meta {
    display: block;
}

.hero-grid>div.hero-content {
    padding: 30px;
}

And you will want to set the Background Image to none.

[Author]

Posts