Archived topic
Featured Image bottom -50%
5 replies · Started by René on October 15, 2022
Hello, how can I put the featured image down by 50%? Of course, it also has to be responsive. Here is a photo of what it should look like.
Hi there,
can i see your site where you want to make this change ?
This is a customer project and cannot give you access data. So that the sidebar starts after the top section, I created the section as a hook (after_header).
Simple solution would be to:
1. Move the dynamic image into its own top level container, that sits below the current hero.
2. Then add hard stop 50% / 50% black and white gradient as its background.
See here:
https://www.screencast.com/t/xW1fBB4xxx
This method means there is no negative margins that will adjusting for responsiveness. And the 50% gradient will always be 50%. So the fake overlap will be consistent on any screen size.
Great idea, worked. Many Thanks. Now I have to get the orange shape in the background right. But maybe I could solve that with position absolute and relative.
I was kind of ignoring the Orange shape as that really throws a spanner in the works lol
The only alternative is to use negative margins on the Image block, but its virtually impossible to do -50% of the Images height. You could do -300px but a % is not going to work.... hmmm
