Archived topic
Header Element Image Position
6 replies · Started by troyw on July 4, 2021
Hey team,
I have a home page banner image which is dark on the left hand side, so that I can place text over this part of the banner.
In desktop this works great, however in mobile view all I can see is the black part of the image.
Now I know this is due to the positioning, so I have tried changing the responsive padding settings in the Page Hero, but all this does is mess up the entire page position. No matter how I set the Padding, I cannot get the image into a useful position.
Is there a way to make the image responsive when using the Image Header. If can at least start with entire image showing on a mobile, I should then be able to mess around with the padding.
Thanks
Hi there,
You can play around with CSS to change the background's position on mobile.
Try this -
@media(max-width:768px){
.page-hero {
background-position-x: 50%;
}
}Hey Elvin,
Just tried this and makes no difference. I tried adjusting max width and position but nothing happens?
I don't see it being applied on the site.
Check this devtool test of the CSS - https://share.getcloudapp.com/yAur9JoZ
Perhaps I'm missing something? Let us know. Thanks.
Yes, very strange. I have added the code to >Customiser > additional css but nothing happens?
How do you get the developer tool to allow you to change that code. I am doing exactly the same, but where yours says 'inspector-stylesheet*' mine just shows 'index' and doesn't give me a blank code editor which I can edit?
It's the plus icon here - https://share.getcloudapp.com/geugPPD7
This tool is used to test CSS.
If it's not working, the reason is usually:
- You're seeing the cached version.
- Your CSS is losing in precedence.
- Wrong selector or @media query. (I'm sure the CSS is correct though.)
- Syntax error.
- You've added on the wrong code area (you've mentioned adding on Additonal CSS though so it should work)
