CSS generic question

Hello Team,
This might be off topic question.
I tried multiple times to work on this CSS part, I am going wrong somewhere.
Could you please help?

I have two pages and one post

Pages:
TV Room: http://wowdesigns.in/projects/xyz/tv-room/
Survey: http://wowdesigns.in/projects/xyz/survey/

Post:
Reading Room: http://wowdesigns.in/projects/xyz/category/reading-room/

If you can see the post header image(Banner/featured image)
It looks totally different from page's header image.

I am not sure where the CSS getting disturbed.

---
I am expecting the pages to have the images like it is displayed in post.

Thanks much.

  • Vaughan

    Hi Harsha.wowd

    Hope you're well?

    It looks to be just a priority of CSS issue.

    You can try the following which is more specific targetting of the CSS elements:

    @media only screen and (min-width: 1280px)
    body.archive.category div#central-wrapper div.content-wrapper {
        width: 1140px;
    }
    body.archive.category div#central-wrapper div.main-holder.content-wrapper img {
        padding: 4em;
    }

    But the other issue on your posts category page looks to be the template you're using for posts categories, and you are using masonry with 4 columns layout for the archive posts category, and each column is then set to 25% width.

    reading-room is a category archive page using a 4 column masonry.

    The other page (Surveys) is an actual page, not a post archive which has a different template.

    But the above CSS should at least get the header image looking the same.

    The pages will not look like the posts because you aren't using a 4 column masonry template on the pages, only on the posts.

    Hope this helps

  • Aleksandar Krstic

    Hi Harsha.wowd,

    I will do a little “walking in the dark” here with solutions, since I don’t know what your Daze theme offers for options.

    As Vaughan mentioned, only one from that 2 “pages” is actual page (have 1 column template), and second is blog category (3 columns template), and images along with text are squeezed on one column - 33% there.

    But, anyway we can try two things here:

    1. I would first check if your theme have option to use same template for blog categories as for pages.
    2. Instead of linking your menu item to the blog category you can link it to page where you will display posts from that category. And this can be done through following steps:
    2.1. Install and activate the following plugin – https://wordpress.org/plugins/display-posts-shortcode/
    2.2. Create page Reading Room and past the following shortcode in it (of course replace category slug with one that you want to display)
    [display-posts category="your-category-slug"]
    2.3. Link Reading Room menu item to that page.

    Again, I’m not sure if this will help you without access to your website, so if you are still having troubles with this you can send us your details through our contact form https://premium.wpmudev.org/contact/#i-have-a-different-question using this template:
    Subject: "Attn: Aleksandar"
    -WordPress admin username
    -WordPress admin password
    -login URL
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant URLs

    Your details will only be used by us for investigation purposes, and will not be shared with anybody outside of the company.

    Regards,
    Aleksandar