Change to Wordpress Theme (CSS)

Pete Long
Pete Long used Ask the Experts™
on
Hi

Updated my Wordpress Theme today and I've always has this problem, so I though I'd ask to see If I can fix it at the same time.

My theme (Nexus by Elegant Themes) has an option to have a featured picture Post, which is great - Im very happy with it, but I'd like the feature post picture to be the same size as the page container, currently it stretches across the whole page like this..

Currently
Id like it to look like (thanks to Photoshop)

Like so
Im usually pretty good at finding these sorts of things but I cant find where thats being done?

Anyone?
Ref URL https://www.petenetlive.com/KB/Article/0001469
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey Pete,

I'm not familiar with your specific theme, so I can only tell you why it's happening. You overall site's width is dictated by a wrapper class - .container. Your header, main content and footer are all wrapped in an element with a class of .container. Your Post thumbnail isn't. You have this html structure:

<div class="post-thumbnail">
    <div class="container">
        <h1>....</h1>
    </div>
</div>

You'll see that the H1 part is wrapped in the container class. However, your image is being dropped in as a background image of the post-thumbnail element which is why it stretches across the page. The CSS for this is inline, so it doesn't exist in any CSS file.

You have a couple of options really. You can add some CSS to set the width of the post-thumbnail element to match the container element. The issue with that is that the container element is responsive, so it has different widths depending on the device you're viewing from. You'd need to set the width of post-thumbnail to match all the responsive sizes.

Another approach is to edit the HTML that generates the post-thumbnail element and add the contain class to that, so you would end up with:

<div class="post-thumbnail container">
    <div class="container">
        <h1>....</h1>
    </div>
</div>

Now the whole of the post-thumbnail would match the container width.

Editing the HTML output is not always straight forward and will depend on your theme. You may be able to overwrite the HTML output or the classes by applying a filter in your functions.php file. You may have to edit the HTML directly, which is never a good idea - you would really need to create a child theme so you can edit the files in there rather than in the main theme.

You may have to get your hands dirty and dig through some of your php files in the themes folder to find out exactly what's going on. If there's an apply_filter() or do_action() call specific to the homepage post image, then you can probably sort this with your own functions file. Have a look at the header.php file, or the homepage template if you have one.

I don't know how they've built the theme so I can't tell you exactly where to look
Pete LongTechnical Consultant

Author

Commented:
Hi Chris,

Thanks (again) OK, that makes sense :)

Let me have a sleuth around!
Pete LongTechnical Consultant

Author

Commented:
The Master css has 8 References to that element 'post-thumbnail'

#featured, .post-thumbnail { background-position: top center; background-repeat: no-repeat; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; }

.post-thumbnail { position: relative; margin-top: -1px; }
            .post-thumbnail:before { -webkit-box-shadow: 0 0 90px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 0 90px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 0 90px rgba(0, 0, 0, 0.5) inset; content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 100%; }
                  .post-thumbnail .container { min-height: 400px; }

.post-thumbnail .container { min-height: 292px; }
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Yeah - like I said - it's not a CSS issue unless you want to add all the responsive media queries to the post-thumbnail class to match the container class (looks like there are at least 5)

Preferably, it's the HTML ouput that you somehow need to cajole into having the container class.
Web Developer
Commented:
If you can't add that class to the post-thumbnail element, this ought to get you pretty close:
.post-thumbnail {
    max-width: 1301px;
    margin: 0 auto;
}

@media screen and (max-width: 823px) {
.post-thumbnail {
    max-width: 765px;
}
}
@media screen and (max-width: 736px) {
.post-thumbnail {
    max-width: 478px;
}
}
@media screen and (max-width: 414px) {
.post-thumbnail {
    max-width: 320px;
}
}

Open in new window

Pete LongTechnical Consultant

Author

Commented:
David,

Spot on that looks to work perfectly thanQ

Chris: Thanks again.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
No worries Pete,

That CSS is the general idea I was talking about, but you'll need to edit them to work with your theme. The sizes specified above won't work correctly with your theme across all devices, so you'll need to play around to get them to match. It would make sense to match them to what is already in your CSS. A great tool to help you do that is the 'Responsive Design Mode'. It's available in Firefox and Chrome in the Developer Panel (press F12 to show it).

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial