[Support request] Fixing the spacing in Header and Footer

Home Forums Support [Support request] Fixing the spacing in Header and Footer

Home Forums Support Fixing the spacing in Header and Footer

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #1545831
    Darshil

    Hey there,
    I have a few problems:

    1) The logo image (being used as header image) has white space around it. Can you please help me fix that, such that the image is fully stretched.

    2) In the footer area, the name of the pages is listed vertically, which is increasing the footerbar space. I would like the page names to be stacked horizontally, so that it comes in the same row (like the reference website)

    3) The page number section is aligned left, how do I align it to the center?

    #1545906
    David
    Staff
    Customer Support

    Hi there,

    1. Add this CSS:

    @media(min-width: 769px) {
        .site-logo {
            max-width: unset;
        }
        .site-logo, .site-header img.header-image {
            width: 100%;
        }
    }

    2. Move your Menu Widget to the Footer Bar

    3. Add this CSS:

    .paging-navigation {
        text-align: center;
    }
    #1545952
    Darshil

    Hi David!

    Everything worked, thanks!

    I want a black strip (like there’s in the primary menu bar) to cover the footer menu – just like the reference site link that I shared.

    Please help me with that.

    Also can you please share a CSS code to align the title of the posts vertically? It is already center aligned horizontally, and I’d like to get it aligned vertically too.

    #1546096
    David
    Staff
    Customer Support

    You can set the color in Customizer > Colors > Footer.

    Add this CSS to align the title vertically:

    @media(min-width: 769px) {
        .post-image-aligned-left .inside-article {
            display: flex;
            align-items: center;
        }
    
        .post-image {
            flex: 1 0 50%;
        }
    }
    #1546140
    Darshil

    Thanks David,

    Is there a way to resize featured images, such that if I upload them, they are resized in a specific dimension every time.

    #1546451
    David
    Staff
    Customer Support

    There isn’t a reliable method for doing that, worst case it would be cropping of the image as opposed to resizing them, which would probably create unintended results.

    Always best to resize the images to suit before uploading.
    Plenty of free desktop apps out there to do this.

    Or if you want a real bargain Affinity Photo is awesome and on a BF sale:

    https://affinity.serif.com/en-gb/photo/

    #1550409
    Darshil

    Thanks David!

    There’s another bug, my featured image’s duplicate is shown at the top of the header (which is lying outside of the container.

    Please help!

    #1551902
    David
    Staff
    Customer Support

    Do you have any custom functions or code in a Hook Element ?

    #1551975
    Darshil

    .page-numbers {
    padding: 5px 6px;
    background-color: #FF0000;
    border-radius: 4px;
    color: #fff !important;
    border: 2px solid #FF0000;
    }

    .page-numbers:hover,
    .page-numbers.current {
    background-color: #fff;
    color: #FF0000 !important;
    }

    .entry-header{
    text-align: center;
    }
    .post-image {
    text-align: center;
    }
    .entry-summary, .entry-summary + .entry-meta {
    display: none;
    }


    @media
    (min-width: 769px) {
    .site-logo {
    max-width: unset;
    }
    .site-logo, .site-header img.header-image {
    width: 100%;
    }
    }

    .paging-navigation {
    text-align: center;
    }


    @media
    (min-width: 769px) {
    .post-image-aligned-left .inside-article {
    display: flex;
    align-items: center;
    }

    .post-image {
    flex: 1 0 50%;
    }
    }

    pre {
    white-space: pre-wrap;
    }


    @media
    (max-width: 420px) {
    .wp-block-table tr td {
    min-width: 48px;
    }

    .wp-block-table tr td:first-child {
    font-size: 12px;
    }
    }

    I don’t know what you mean by hook, and where to find that. I have this code in additional CSS. Does this suffice, if not then please tell me where to look. Thanks!

    #1552865
    Leo
    Staff
    Customer Support
    #1553979
    Darshil

    Hey Leo,

    So I just activated the elements section and there was nothing it said “no posts found”. But I remember long back in the free forums I asked for help for integrating google analytics in the header and you gave me a code to add it to the functions.php file in the child theme.

    I think that is what you’re looking for. Sharing the entire code from functions.php child

    #1555061
    David
    Staff
    Customer Support

    Hi there,

    are you wanting to remove the featured image in the post content?

    If so in Customizer > Layout > Blog –> Featured Images >>> Post – set the location to Below Title.

    OR

    IF you want to remove the Featured Image that is being displayed about the Page then remove this function from your functions.php:

    add_action( 'wp', function() {
        remove_action( 'generate_after_entry_header', 'generate_post_image' );
        add_action( 'generate_before_content', 'generate_post_image' );
    } );
    #1555075
    Sara Genone

    Hi David
    I want to remove the Featured Image that is being displayed about the Page but I don’t want to modify the function.php file is it possible?
    https://dev.socialmela.it/consulenza-formazione/
    Thank you
    Sara

    #1555086
    Sara Genone

    I find solution by myself 🙂
    adding this css code
    it’s work but is it correct?
    .page-header-image-single, .featured-image {
    display: none;
    }
    thks
    sara

    #1555095
    David
    Staff
    Customer Support

    Hi Sara,

    you do not need to edit the functions.php – you can remove Featured Images in Customizer > Layout > Blog –> Featured Images >>> Posts or Pages.

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