- This topic has 7 replies, 2 voices, and was last updated 5 years, 11 months ago by Leo.
-
AuthorPosts
-
April 5, 2018 at 8:17 am #542042Laura
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!
LauraApril 5, 2018 at 11:47 am #542235LeoStaffCustomer SupportHi 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.
April 5, 2018 at 12:23 pm #542287LauraHi 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
April 5, 2018 at 5:19 pm #542480LeoStaffCustomer SupportEdited 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?
April 6, 2018 at 4:59 am #542827LauraYes! 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;
}
}
LauraApril 6, 2018 at 8:34 am #543041LeoStaffCustomer SupportThe 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); } }
April 6, 2018 at 9:21 am #543080LauraI think you are the best. ๐
LauraApril 6, 2018 at 12:36 pm #543207LeoStaffCustomer Supporthaha you are very welcome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.