Change to Wordpress Theme (CSS)

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
LVL 58
Pete LongTechnical ConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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
0
Pete LongTechnical ConsultantAuthor Commented:
Hi Chris,

Thanks (again) OK, that makes sense :)

Let me have a sleuth around!
0
Pete LongTechnical ConsultantAuthor 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; }
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
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.
0
David KellyWeb DeveloperCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pete LongTechnical ConsultantAuthor Commented:
David,

Spot on that looks to work perfectly thanQ

Chris: Thanks again.
0
Chris StanyonWebDevCommented:
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).
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.