Full width post images?

My guess is to change this in the css:

.section-inner.thin { width: 740px; }

…to width: 100%, then create two separate custom div settings for the post content text width and post content image width?

OK…it doesn’t exactly work. I am sure this is due to my lack of understanding of the document structure.

I am pretty sure I need to look at these elements:

.section { padding: 100px 0; }

.medium-padding { padding: 80px 0; }
.light-padding { padding: 50px 0; }
.small-padding { padding: 30px 0; }
.no-padding { padding: 0; }

.bg-grey { background: #f1f1f1; }

.section-inner {
	width: 1300px;
	max-width: 84%;
	margin: 0 auto;
}

.section-inner.medium { width: 1040px; }
.section-inner.thin { width: 740px; }

And maybe I will need to modify the page.php file as well?

Will try to play around with things in the meantime. If anyone understand this better I would appreciate the help. ??

OK…probably not the best way to do this, but I think I have made it work with some brute force.

I am able to do this as follows:

• after the post text where I want to insert an image, I added a </div> tag, to get me out of the section.inner.thin division, defined in the css as 740px.
• I then created a custom <div> class in the css, defining it by the width I want my images to be (I called it.section-inner.wide and gave if the following: { width: 90%;}
• in the post where I want my images to be, I created a new div with the class created in the above step
• after the image(s), I closed the div with </div>
• I then inserted a div with the class of the post content text (.section-inner.thin { width: 740px; }) in order to return the width to that specified div width

Hi I am attempting to make a full width picture as well. Seems like you came up with some sort of solution. I am new to coding so if you could help me out. What was the full code you posted in css?

In the styles.css file, I added the following line:

.section-inner.wide { width: 90%;}

You can change the width to 100% if you want full width images.

Then, when making the post, I only use the WordPress html editor like this:
1. write the text of your post
2. use the </div> command to exit the narrow formatted division
3. use <div class="post-content section-inner wide"> to start a division where your full-screen images will go.
4. insert your images after this code
5. at the end of the last image, use `</div> to exit this type of formatting
6. reopen the original formatting division by typing <div class="post-content section-inner thin">
7. write additional text for your post if you like

The above seems to work well for me.

Remember, whenever you want to insert images, you need to create a <div class="post-content section-inner wide">, place your images in it, and then close the division with a </div>.

Let me know if you got it to work.

Here is the template I saved for making new posts:

<p>
<!-- TEXT HERE -->

</p>

<p><!-- TEXT HERE -->

</p>
<br>
</div>

<div class="post-content section-inner wide">
<!-- IMAGES HERE -->

</div>

<div class="post-content section-inner thin">
<p>TEXT HERE</p>
<p>MORE TEXT HERE.</p>
<br>
<div class="post-content section-inner wide">
<!-- IMAGES HERE -->

</div>

You may omit the <p> and </p> in your posts. WordPress adds them automatically. I have them there because I use a plugin that disables WordPress from automatically inserting them (since I want control over where and when they appear).

Thank you so much for replying! I am trying to put full width pictures on my home page actually but I can’t seem to get it to work. Not really sure if I put this code into my style.css file incorrectly but I just pasted it underneath everything that was already there. Sorry I am completely new at this!!! So now it looks like this

/*
Theme Name: Radcliffe Child Theme
Description: my child theme
Author: Dana Baginski
Template: radcliffe

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url(“../radcliffe/style.css”);
.section-inner.wide { width: 90%;}

But even using your little template I can;t get it to work. If you have an idea of what I’m doing wrong I would love the help ??

My solution is only for full/larger images in <i>posts</i>.

I’m not sure exactly what you want to do since the Radcliffe theme already has full width pictures on the home/main/index page. The home page is a listing of recent posts with full page photos of the featured images for each post.

Also, it appears that, if you want to do what I did, you are editing the wrong css file. You should be editing the main Radcliffe style.css in the Radcliffe theme folder. If you do that, you can enter the code .section-inner.wide { width: 100%;} in any blank spot in the css. If you do this, be sure to save the css file and reload the page. Also, another tip after you make these changes is to clear your browser cache for your webpage. I am not entirely sure, but it might be the case that css files are cached (saved to your computer) and so, if you update or change the css file that is stored online, your browser might still be using the old css file that is stored on your computer instead of the new one. Clearing the cache for your page will force your browser to access the new/updated css file since the old one is deleted when you clear the cache.

The style.css file that you should be editing starts like this:

/*---------------------------------------------------------------------------------

	Theme Name: Radcliffe
	Version: 1.09
	Description: A theme for bloggers who want their content to take center stage. Radcliffe features responsive design, retina-ready assets, full width header images, beautiful design and typography, support for custom logo, support for custom accent color, three widget areas, editor style and translation-ready code. Included translations: Swedish/svenska.
	Tags: gray, white, one-column, fluid-layout, responsive-layout, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready, editor-style
	Author: Anders Norén
	Author URI: https://www.andersnoren.se
	Theme URI: https://www.andersnoren.se/teman/radcliffe-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: https://www.gnu.org/licenses/gpl-2.0.html

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (https://www.gnu.org/licenses/gpl-2.0.html)

-----------------------------------------------------------------------------------

	0.	CSS Reset
	1.	Document Setup
	2.  Structure
	3.	Header
	4.	Navigation
	5.	Main Content
	6.  Single Post
	7.	Post Content
	8.	Comments
	9.	Pagination
	10.	Page & Page Templates
	11.	Footer
	12.	Credits
	13. Media Queries

----------------------------------------------------------------------------------- */

I am trying to make a front page to my website.. With other information besides recent posts. I love the way the full images look but I wanted to break it up with some text or columns of text. I tried to use a page builder plugin but I think the theme is stopping it from being a full width picture so I thought I might be able to use your little code to achieve that. anyways I am using a child theme so thats probably why it looks a little different. Not sure how to find the one your mentioning. thanks so much for replying I might just try a different theme because this one doesn’t seem to be able to give me the look I want.

Hi brokeandsavvy, I’ve tried adding in your code .section-inner.wide { width: 100%} to the style sheet (in section 4. Navigation), and added <div class=”post content section-inner wide”> to the HTML in Posts, it makes the width smaller than the width of the text, not wider.

Currently it is the width of the text, and would like the image to be the width of the computer screen.

Hoping for some help, thanks!

I can’t even figure out how to SET the background image. It’s blank! The theme description says “You can even take it a step further and set a custom background by going to Appearance → Background,” But I have no “Background” option under “Appearance.” There is no such option in the “Customize” menu, either. So all I have is a big, white screen with text on it – not the look I want for my website. But I can’t find any help anywhere! Where do I find these options?