[Resolved] How to center featured images in posts and pages from a single css file

Home Forums Support How to center featured images in posts and pages from a single css file

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #311394
    Enrico

    Good morning,
    I am using this css in the main css file to center featured images in all posts.

    .page-header-image {
    text-align: center;
    }

    This code was not working on pages so I added the same code in each page to center the featured image in pages.

    Moving the code at the end of the main CSS file it started working on all pages. So I removed the CSS code in each page.

    Unfortunately, after some time, I noticed that it was not centering anymore the featured images in posts.

    Searching in the forum for a solution I found this new css code

    .page-header-image-single {
    text-align: center;
    }

    But also this code, if used in the main css file, it works only on posts.

    There is a way to center featured images both in posts and pages using the css code only in the main css file? Or I have to add again the css code in each page? In this last case, it is better to use .page-header-image or .page-header?

    Thanks a lot
    Enrico

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #311573
    Tom
    Lead Developer
    Lead Developer

    Moving the code at the end of the main CSS file it started working on all pages.

    This tells me you probably have a CSS error in your file. Try running it through a validator to check: https://jigsaw.w3.org/css-validator/#validate_by_input

    #311623
    Enrico

    I tested all the version of the CSS code and the validator validated all.

    #311632
    Leo
    Staff
    Customer Support

    Hmm this code should definitely work on both pages and posts:

    .page-header-image-single {
        text-align: center;
    }

    How are you adding the code currently? Are you able to provide a link to your site?

    Thanks!

    #311652
    Enrico

    In my first website jobseekeritalia.it that css code it has always worked only in posts and not in pages

    Now I am developing a new web site digitaldem.it and when I inserted the CSS code from customizer in the “Additional CSS” it started working only in pages.

    The customizer was open on a page and I saw immediately the image in the page centered. I saved it successfully.

    So I think now that it was not the position of the code at the end of the file that changed how it worked for years, it was the customizer that was opened on a page.

    Anyway on both sites now don’t works on pages but only on posts.

    #311686
    Leo
    Staff
    Customer Support

    https://digitaldem.it/2017/04/18/piattaforma-partito-digitale-2-0/
    This page is working because the image is inserted as Featured image which means this code would work:

    .page-header-image-single {
        text-align: center;
    }

    https://digitaldem.it/newsletter/
    This page is not working because the image is added as the Page Header image, you can either add the image as Featured image like above, or use this code:

    .page-header-image {
        text-align: center;
    }

    Let me know if this answers your question.

    #311709
    Enrico

    I added both the code like this:

    .page-header-image-single {
    text-align: center;
    }

    .page-header-image {
    text-align: center;
    }

    Is it correct to add both the css? In this way it works on pages and posts and on both sites.

    But the images in https://digitaldem.it/newsletter/ was added as Featured image, so I don’t know how it become a header image. It could be the Generatedpress add on “page heade” that transformed the image in header image?

    #311781
    Leo
    Staff
    Customer Support

    Yup you can add both if you want. Looks like it’s all working now?

    No GP definitely doesn’t transform featured image into page header image.

    #311801
    Tom
    Lead Developer
    Lead Developer

    No GP definitely doesn’t transform featured image into page header image.

    Technically they’re the same thing. The Page Header add-on can use the featured image or a custom uploaded image. This is so you can display a feature image in the archives and use a completely different image on the single post.

    I actually suggest people use the featured image in the Page Header add-on instead of the custom image if they can.

    #311849
    Enrico

    Thanks a lot Tom and Leo, using both the css code in Additional Css or Child them is the best solution to center the images in post and pages. I only use featured images, but now I know that in pages they became page headers.

    #311957
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.