Archived topic
How to change x position of Page Hero on mobile
3 replies · Started by Alexandra on November 8, 2020
Hey guys,
I'm using a Header Element to have a fullscreen Page Hero created out of the featured image for my posts.
See example here: https://alex.bandiwork.dev/2020/10/postare-test.html
I've set the Background position to center center and I have an overlay as well.
I'm trying to change the x position of the featured image for the mobile version so that I could have this section selected for mobile instead of center center: https://prnt.sc/vfvaxx
I've tried some CSS but it was also moving my overlay, so I removed it.
Is there a way you can help me achieve this, please?
Thank you so much!
Hi there,
I would try this :
1. Install the Simple CSS plugin:
https://wordpress.org/plugins/simple-css/
This will provide a CSS meta box in the post editor, so you can apply CSS specifically to that post.
2. Add this CSS:
@media (max-width: 768px) {
.page-hero {
background-position: 10% 50%;
}
}Oh, wow, David! That is awesome!
That is exactly what I wanted & more :)
Thank you so much!
Glad to be of help :)
