[Resolved] Page Hero fix

[Matteo]

Hi,

I’m trying to create a page hero like this but it seems too difficult for me to fix the actual that I create reading the examples in the documentation.

I’d like to:

1. Move the text and the button on the left (changing font and size);
2. Add a pre-headline;
3. Move the image on the right (resized based on device like in that site).

How can i fix it?

Thanks.

[Tom]

Hi there,

What they’re doing there is somewhat complex.

They’ve created two columns with HTML inside the headlines/button. Then they’ve used absolute images to achieve the responsive images. Something like that takes a lot of tweaking, so it’s probably easier to just change the images out for desktop/mobile.

Try something like this:

<div class="hero-columns">
    <div class="hero-text">
        <h3>Pre-heading stuff here.</h3>
        <h1>Main heading here</h1>
        <p>Main text here.</p>
        <a class="button" href="#">Button</a>
    </div>

    <div class="hero-images">
        <img src="URL TO DESKTOP IMAGE" class="hide-on-mobile" alt="" />
        <img src="URL TO MOBILE IMAGE" class="hide-on-desktop hide-on-tablet" alt="" />
    </div>
</div>

Then your CSS:

.hero-columns {
    display: flex;
    align-items: center;
}

Won’t be perfect, but it should definitely serve as a solid starting point 🙂

[Matteo]

Just insert your code.

I also added a tablet version image.

It seems much better but I need a developer to complete the job.

Someone able to do the work only with Elements, Sections, HTML, CSS?

[Tom]

Hi there,

If you remove this code in your custom CSS, it should look a lot better:

.inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: "left right";
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}

If it’s close and needs some tweaking, let me know specifically what you need changed and I’ll try to help.

If you need a developer to work with continuously, something like codeable.io might be worth checking out 🙂

[Matteo]

Thank you.

I’d like to know how to:

1. Change font type size and color of H1, H2, H3 only in page hero;
2. Change the distance (margin and/or padding?) of the classes “hero-columns” and “hero-images” and/or the elements inside (text and image) from top, bottom, right, left in different device (desktop, tablet, mobile).
3. Align my photo to the bottom border in every device.

[Tom]

Hi there,

1. To target these elements, you can do this:

.hero-columns h1 {
    font-size: 30px;
    color: #000;
}

.hero-columns h2 {
    font-size: 30px;
    color: #000;
}

And so on..

2. You could try just tweaking the hero-images padding?:

.hero-images {
    padding: 30px;
}

@media (max-width: 1000px) {
    .hero-images {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .hero-images {
        padding: 10px;
    }
}

3. Add this CSS:

.hero-images {
    align-self: flex-end;
}

.hero-images img {
    vertical-align: bottom;
}

[Author]

Posts