[Resolved] Page Hero fix

Home Forums Support Page Hero fix

  • This topic has 5 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1122822
    Azzurra

    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.

    #1123092
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1123322
    Azzurra

    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?

    #1123759
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1124346
    Azzurra

    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.

    #1124816
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.