Archived topic
Header Element mobile view
5 replies · Started by David on August 5, 2022
Hi there,
I've provided a link to my site in the details.
My question: I've created a header section element that includes an image with text and buttons. On desktop view it looks nice, on mobile view however the image shows parts of the image that are not ideal.
How I can I change this? Should I create a new header section element specifically for mobile?
Thanks in advance,
David
Hi David,
You can try this CSS:
@media (max-width: 768px) {
.page-hero {
background-position-x: 80%;
}
}Hi Fernando,
thank you, this worked - I've deactivated my optimization plugin (as mentioned in another support thread).
One more question though: Can I move down the text and the buttons in mobile view only?
Thanks!
David
Modify your code into this:
@media (max-width: 768px) {
.page-hero {
background-position-x: 80%;
}
.inside-page-hero.grid-container.grid-parent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}Modify the values to your preference.
Perfect, thank you! Resolved.
You’re welcome David!
