Expanding width of column on blog posts and pages across an entire website
-
Hello everyone,
I am going to be switching themes from Photographer to Affinity.
On Affinity, I will be using a single-column template for pages and blog posts. I would like to expand the column width of the Affinity theme.
I would like all of my photos to display at 900 width, and for the text to be the same width as the photos. The preferred look would be similar to what is on my current site now. Here is an example:
Do you have any recommendations for specific code I would use to achieve this? I’ll be getting the CSS Upgrade, and am a novice.
Many thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, this can be done. Since you have not yet switched to Affinity, I can’t work off of your site, but working off the demo site, this is what I came up with. It may need some tweaking once you switch.
.site-content .site-main { float: none; margin-left: auto; margin-right: auto; max-width: 900px; } .featured-image, .featured-image img { width: 100% !important; } -
Belated thanks for your help! I just activated Affinity today, and will probably do the CSS Upgrade tomorrow. Do you think your code will work now that I’ve officially transitioned to the new theme?
In order for my entire site to be 900 width, do I merely apply the code in one place?
I greatly appreciate your help, and I look forward to learning CSS. :)
-
So I was trying to do this with my Responsive-themed site, LeagueFactions.net, and copying the code in didn’t seem to work.
Here’s my complete CSS code from the “customize” menu, including that snippet:
[code removed by @thesacredpath to avoid confusion]
It doesn't seem to change at all with the addition of that last block, though.
If you could explain what I'm missing, I'd really appreciate it! My site gets kind of "smushed". It's hard to fit lots of text and images into 600 pixels.
-
Hi @cupcaketrap, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.
-
@thesacredpath Thank you for your continued help! I tried the CSS code you gave me in Demo mode and it appeared to work. I then went ahead and purchased the CSS Upgrade, and the code didn’t seem to do anything.
The CSS code you generated is pasted there now, and saved. Could you please let me know what might be wrong?
Many thanks for your assistance; I’m greatly appreciative. :)
-
I forgot to add that I would like the static Homepage to maintain the default look of the Affinity theme. In short, i just hope to change the width of text/photos to 900 across all other pages, as well as the blog / blogposts.
Thank you again.
-
Hi there, I checked your about page, and if you add the following CSS, it should take most of the images full width (to 900px).
img { width: 100% !important; }I do notice that at least one of your images on the about page (caption starts with Mom and me…) is is only 530px in width. On that one, we can’t override and make it larger. What you would have to do would be to edit it in an image editing program and make it at least 900px in width, save and upload it and then delete that image from that page and insert the new wider one.
-
@thesacredpath Yes, I understand that images that were uploaded at less than 900 px in width cannot become larger. I already use Adobe Fireworks to size the images before uploading to WordPress. I’ve sized the majority of my images to be 900×600 px.
I would like to achieve the following:
*Change the column width to 900 px (for blog posts & all pages).
*Maintain the theme’s default design settings for the static homepage.On 5 Dec., you shared tentative code, and you wrote that your code might not work out of Demo Mode. Indeed, you were correct. Your code worked in CSS Demo Mode, but it does not work now that I have paid for the CSS upgrade.
Thank you! :)
-
Let’s give this a try. In the original code, it targeted all pages and posts, including the home page. With the following, we are telling the browser to not apply this change to the home page.
body:not(.home) .site-content .site-main { float: none; margin-left: auto; margin-right: auto; max-width: 900px; } body:not(.home) .featured-image, .featured-image img { width: 100% !important; }Let me know how that works.
-
Thank you for providing an updated version of the code. Unfortunately, nothing seems to be happening. Upon closer look at the desktop version, the column in the blog section may be 900px wide. The title of a blog post looks about right. However, the date and author tag just below the title seems to be narrowing the column text and picture width.
Is there any way to move the author and date tag underneath the title and allow the body with text and images to expand? The theme’s default mobile version is doing this, and I like the mobile version very much. I intend to keep Affinity’s default mobile version.
My previous theme, Photographer, enabled beautiful, wide images and text on posts and pages. I would very much like to have a similar width with my new theme, Affinity.
Here is a link to the Photographer theme so you can see the column width on its desktop version: https://photographerdemo.wordpress.com/blog/
Many thanks.
-
Hi, Photographer posts are design/structured differently than Affinity. We can make the entry meta section full width and then make the content recover that space with thing for the blog and single post pages.
.blog .entry-meta, .single .entry-meta { width: 100%; } .blog .entry-meta span, .single .entry-meta span { display: inline; } .blog .entry-content, .single .entry-content { width: 100%; }For static pages, such as your about page, the following CSS will take them to 900px in width.
.page .site-main { width: 100%; max-width: 900px }For the front page, this would do it.
.affinity-front-page .site-content .entry-header, .affinity-front-page .site-content .entry-content, .affinity-front-page .site-content .entry-footer { max-width: 900px; width: 100%; }Let’s give the above a try.
-
@thesacredpath You’re awesome! :)
I applied the below code, omitting the code for the front page (because I like the theme’s front page in its default version).
Applying that code finally made the images and text on the blog posts and pages expand, to what I think is 820px. That looks so much better!
When I contrast my ‘new’ site with the Photographer demo I can see that my content on pages and blog posts is still a bit narrower than 900. Any thoughts on why the images might not be going to the full 900px? The last few years, I’ve optimized most of them at 900×600.
Thanks so much!
Here’s what I applied –
.blog .entry-meta, .single .entry-meta {
width: 100%;
}
.blog .entry-meta span, .single .entry-meta span {
display: inline;
}
.blog .entry-content, .single .entry-content {
width: 100%;
}
.page .site-main {
width: 100%;
max-width: 900px
} -
Add this to your custom CSS
.no-sidebar .site-main { max-width: 900px; width: 100%; }and then below the CSS entry area, put 900 in the Media Width field. The preview may not update, so save and visit your site.
-
You’ve done it again! Thank you so much! That appears to have worked perfectly and makes everything align better, and look larger. Thank you.
One additional question, please:
How would I left-align what I think is called the “metadata” in the desktop version. What I’m referring to is the text at the very bottom of a blog post, saying “Posted in” and “Tagged”. At the moment this “metadata” appears to be centered or right aligned. I think it might look best left-aligned though.
Thank you again; you’ve been such a great help!
-
Awesome!
To make the footer metadata float left, add the following to your custom CSS.
.entry-footer { width: 100%; float: left; }
- The topic ‘Expanding width of column on blog posts and pages across an entire website’ is closed to new replies.
WordPress.com Forums 