How can I make my hero image fit on the screen without covering my text and CTA. I also want it to be responsive on mobile.
I’ve tried putting the image inside a div but it covers my paragraph text and CTA, both in the builder and on the test page.
Link to the divhunt page: vecstudio | Homepage
Hey @fatcow, as I understand, you want to fit the content + your image on the screen at the same time? With the current setup (vertical) and the sizes of your tags, it’s not physically possible. You have 2 solutions here:
Make everything smaller and make a parent Div that holds everything inside “height: 100vh”
Switch your layout to be horizontal (content on the left, image on the right) with display: flex. And then, on mobile and smaller screens that can’t fit these side by side, you would switch to a vertical layout.
I definitely suggest approach number 2 since it’s easier to achieve, it’s standard layout in web design, and you are displaying every relevant information to the user on the screen simultaneously.
Hope this helps, let me know if you need any assistance!
I was thinking @fatcow meant to use the image as a background image…no?
If used as background image, any text would show on top of the image…not sure if that was his intent or not…?
He wrote “without covering text and CTA” so I guess he didn’t mean to use it as a BG, but let’s wait for him to answer and we’ll find some solution
Yeah, I think his text and CTA are both in the hero section - if that’s the case @fatcow, go to the design view/background, and set BG Type to image.
@Lazarevic Thank you for your swift reply.
I tried both solutions but didn’t get the intended results. the hero image still sits above the paragraph and cta.
@ShorePatrol Thanks for your input. I tried using the image as the background, the challenge I faced was getting the image below the heading copy and cta.
It took that space and obscured the text we have.