Home page header photo cuts off part of photo

  • Hi, I’m using Astra theme.

    The website I’ve built is harvest3.com.

    Just trying to get the full header photo on the home page (blue daisy) to show up on both laptop and mobile.

    On laptop, part of the top of the photo is cut off when the browser is full screen.

    On mobile (I’m using iPhone 8), the whole right half of the photo with the blue daisy is cut off.

    How on earth do I upload the photo so that people can actually see all of it regardless of which device they’re using?

    I’m hoping there’s a way to do it without upgrading the theme from the free version.

    So far haven’t gotten it to look right one single time.

    The website is harvest3.com and photo upload dimensions are 1080 x 420 with a PNG file. Thanks.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @rachellecdavis,

    Welcome to the exciting world of responsive web design (rwd). There isn’t a one size fits all.

    I explain this is more detail using what’s called art direction images.

    Shout if you have any questions ??

    Thread Starter rachellecdavis

    (@rachellecdavis)

    Hmmm…okay I get it @mlchaves

    Can I break the site if I screw up on the CSS inputs?

    I also opened a ticket with Elementor since I’m using Elementor + Astra WordPress theme…

    They said to try a custom header and see if that solves the problem.

    What do you think about that option?

    Any pointers on that? Their tutorial didn’t actually address photos in the custom header so I’m still not sure how to make it look right.

    Also, I want that text on there still…the Astra theme already has title boxes in the header photo so you can just type whatever text you want…if I do a custom Elementor header or the art direction option it looks like I need that text in the actual photo file?

    Thanks.

    Hello @rachellecdavis

    Yes, Custom Header could be the solution and currently, I can see the Header is built using the Elementor section.

    You will need to look into their settings to help create the section as required.

    Do reach out to the Elementor Team with any further concerns as they will be able to help you in a better manner.

    I hope that helps.

    Regards,
    Suman

    Hi @rachellecdavis,

    > They said to try a custom header and see if that solves the problem.

    I’m not exactly what is meant by “try a custom header”? Sorry. Whether you use a custom header or not, you’ll still need to apply art direction images. How many will art direction images will depend on your original image.
    I did one job recently for a new client where I needed 8 images. Their requirement was tough because specified a specific height for a couple of the breakpoints. And, they wanted it to look really smooth. It took me about 2.5 hours to code it up.

    I have another CodePen that’s more simple. This one uses only two images (they’re different images, but you should get the idea).

    https://codepen.io/marklchaves/full/eaaXXW

    > Any pointers on that? Their tutorial didn’t actually address photos in the custom header so I’m still not sure how to make it look right.

    No, sorry. I still don’t know what is meant by a custom header.

    > Also, I want that text on there still…the Astra theme already has title boxes in the header photo so you can just type whatever text you want…if I do a custom Elementor header or the art direction option it looks like I need that text in the actual photo file?

    Not sure. If you specify a background image, you should be able to overlay HTML text elements on top of it. I would never build a hero image with flattened text in the image. This method is anti-responsive.

    I address this anti-pattern here https://www.quora.com/Is-there-a-program-that-inserts-text-over-images

    Lastly–just to share, I recently posted a tutorial showing how I built a beautiful full-width hero using GeneratePress and Gutenberg. No plugins or premium add-ons.

    https://dev.to/marklchaves/creating-a-full-width-hero-in-generatepress-free-version-1ki9

    I hope your head isn’t spinning too much right about now ??

    Shout if you have any questions. You can Slack me anytime too, if you want to close this thread.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Home page header photo cuts off part of photo’ is closed to new replies.