Archived topic
Move header text to bottom
7 replies · Started by Laura on April 5, 2018
Hello -
I would like the text of the page header to be at the bottom of the header image, and a bit off centered to the right, if possible. (Below the women's faces.)
I looked through the forum but could not get the custom CSS examples out there to move it from vertically aligned center.
Under the content tab I have top and bottom padding set to 120 and left right set to 10.
The containers are set to full width.
I appreciate any advice and thank you!
Laura
Hi Laura,
Give this CSS a shot:
@media (min-width:769px) {
#page-header-52 .page-header-content-container {
padding-top: 240px;
padding-bottom: 0;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know.
Hi Leo! Thanks. On desktop that works like a dream. On mobile, the text walks off the page. Maybe because of the padding? But the header did not look good on mobile in the first place because the picture gets cropped to just the women in the middle. I think there is a thread somewhere on how to substitute a different header for mobile. @media or something...somewhere.
I will look around for that. If you know of it or have advice, I will take it. Thank you!
Laura
Edited the CSS above so it only applies to desktop: https://generatepress.com/forums/topic/move-header-text-to-bottom/#post-542235
Background images aren't responsive by nature unfortunately. A wide image like that doesn't really work well on mobile.
One thing we can do is to switch out the background image and use one specifically for mobile. Would that work for you?
Yes! I was trying to do that. I have seen threads about how to have a different image for mobile...but so far I have failed to successfully make it happen. That would be great! I've got my image ready to go. Thanks for being so responsive.
I started on this CSS to make the words centered horizontally on mobile, and at a reasonable size for mobile. Working so far! I did not understand @media tags...but that was easy! Thanks!
@media (min-width:769px) {
#page-header-52 .page-header-content-container {
padding-top: 240px;
padding-bottom: 0;
font-size: 6em;
}
}
@media (max-width:769px) {
#page-header-52 .page-header-content-container {
padding-top: 100px;
padding-bottom: 0;
font-size: 3em;
text-align: center;
}
}
Laura
The code to switch image for you would be:
@media (max-width: 768px) {
#page-header-52.generate-content-header {
background-image: url(http://MOBILE-IMAGE-URL-HERE);
}
}I think you are the best. :)
Laura
haha you are very welcome :)
