[Support request] Padding switching from Page Header to Element Page Hero

Home Forums Support [Support request] Padding switching from Page Header to Element Page Hero

Home Forums Support Padding switching from Page Header to Element Page Hero

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2168693
    Laura

    Hello –
    Thanks in advance. You guys are always helpful.

    I had a site-wide page header on this site, but I now realize that’s been depricated and I must change it due to a conflict.
    http://chwari.org/
    The page header is still active on the home page, and that is what I’d like it to look like. The writing is at the bottom due to some custom CSS that put the text at the bottom with padding of 240px

    @media
    (min-width:769px) {
    #page-header-52 .page-header-content-container {
    padding-top: 240px;
    padding-bottom: 0;
    font-size: 6em;
    I have installed a header ‘element’ on this page and am looking to get the same result – move the orange text to the bottom of header.
    http://chwari.org/event/oral-health-chw-training-2/
    I do not know what CSS to use to call up this Page Hero Element.

    It looks like my mobile custom CSS for this header will need to change as well. It was this:

    @media
    (max-width: 768px) {
    #page-header-52.generate-content-header {
    background-image: url(http://chwari.org/wp-content/uploads/2018/04/HEZ-CHWs-for-CHWMonth-Resolution-April-4-2018-mobile.jpg);
    }
    }

    @media
    (max-width:768px) {
    #page-header-52 .page-header-content-container {
    padding-top: 100px;
    padding-bottom: 0;
    font-size: 3em;
    text-align: center;

    Any help finding out how to address those elements in CSS would be very useful!
    Thanks!
    Laura

    #2169182
    Fernando
    Customer Support

    Hi Laura, with regards to the spacing of your Header Element, it would be best to modify it through the Element first to avoid extra CSS.

    Specifically, try setting a Top padding and leaving the Bottom Padding blank for the Header Element as such: https://share.getcloudapp.com/rRu1orzR

    You may also set something specific for Mobile View by selecting this: https://share.getcloudapp.com/mXuY6wvP

    With regards to the font size on Mobile, here is a CSS you may try:

    @media (max-width:768px) {
        .page-hero h6 {
            font-size: 30px;
        }
    }

    Hope this helps! Kindly let us know how it goes. 🙂

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.