How to display full width image in front page

Hi.

Can someone tell me how to display a full width image in the front page, specifically in the Latest Post section?
Also, how do I add a text over that said image?

Thanks.

Hi,

Sorry, this is not 100% clear for me, can you please clarify what you want to achieve, also please post a link to your website.

Best Regards,
Csaba

This is my website: www.paperspace.net. What I want to do is to stretch the second image (the one with two pairs of hands, and a cluttered desk) to occupy the entire screen. Also, can you please tell me how to remove the title of the post (About Us)?

Thanks.

Hi,

You can make the image full-screen if you make the container on that page full-width, so everything inside the container will be full-screen, not just the image, since the image is inside the container this is the only way to make it full-width, by making the container full-width, with this Custom CSS:

#primary {
    padding: 0 !important;
}

.content-area .post-wrap, .contact-form-wrap {
    padding-right: 0 !important;
}

@media (min-width: 1200px) {
.blog .container {
    width: 100% !important;
}
}

You can hide the title with this Custom CSS:

.blog .entry-header {
    display: none !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Worked like a charm. Thank you very much!

However, what do I do if I want to put padding around the text?

Hi,

Please let me know around which text you want to add padding, so I can give you a correct Custom CSS for that.

Best Regards,
Csaba

The entire text of that post. My site’s under a HTTP 500 Error right now though, unfortunately.

Hi,

Please resolve the 500 error, then let me know about what I have requested in my previous post.

Best Regards,
Csaba

Hi,

I want the padding on the entire text in the blog area (Paperspace was born in Thailand in… for the future).

Although, how it looks like right now is actually what I’m aiming for it to look, as it might be not as handsome for other screen resolutions, I’d still rather use a code for it.

Thanks.

Hi,

With adding padding to the text you can’t resolve the issue, you’ve added some spans to the text, which is wrong, please remove it, so then I can give you a Custom CSS to make a similar look you have achieved with the spans.

Best Regards,
Csaba

Done.

Hi,

Please try this Custom CSS and let me know how it works:

.entry-post p {
    padding: 50px 200px !important;
}

.entry-post p#story {
    padding: 0 !important;
}

@media only screen and (max-width: 768px) {
.entry-post p {
    padding: 20px 100px !important;
}
}

Best Regards,
Csaba