Column size adjustment for Sight theme.
-
Hi,
I’ve been making some extensive changes to my site to ensure that my full size blog images accurately display at a width of 640px for the landscape/horizontal pictures.
I’ve used the custom css window (I have the upgrade) and have changed the content width box to read 640 instead of 610px
Set a different content width for videos, full size images, and other shortcodes if necessary. The default content width for the Sight theme is 610 pixels.
I thought that it was fixed as the photos are not looking as compressed as they were doing, but they still don’t seem to be displaying full size and I’d like to fix that asap. I’m happy to narrow my sidebar column if you think that will help.
I tried the code in this question link but I couldn’t get it to work for me
https://en.forums.wordpress.com/topic/content-width-for-pilcrow?replies=4#post-1579935
Thank you for looking.
Kell =)The blog I need help with is: (visible only to logged in users)
-
A few things:
1) The CSS in the forum link you wrote will not work, because it is made for a different theme.
2) Do you want your post pictures to be flush with the post’s paragraphs, or flush with the left margin?
-
Hi,
Ok that makes sense! I’m new to css so I wasn’t sure which parts were specific to my situation.The pictures don’t really need to be flush with anything as I always align centre. But I guess paragraphs would make more sense.
All I want is for them to be able to display full width 640px without any compression or distortion.Sometimes I find that captioning them squashes them down a little too.
-
Let’s talk about the theme as it is, first.
As you probably know, images lose some color and sharpness when the displayed version is a scaled down version of the file you have uploaded. As you also know, the default max width on Sight is 610px.
So, for non-captioned images, you get best quality if you create, upload and insert files that are 610px wide or less.
Captioned images are a different story. When you add a caption, the image shrinks a little in relation to its plain version (to make room for the grey frame, when the images are full-width), so all your captioned images lose quality, even if they are a lot narrower than 610px. For best quality when the images are captioned, you need to create, upload and insert files that are 588px wide or less, and you need to add this CSS to prevent the shrinking:.wp-caption img { max-width: 100%; }Now, re the 640: You understand that typing a higher number in the
“Content Width” box has no effect unless you add CSS to make the main column wider (and the sidebar narrower). We can work out the CSS for this, if that’s what you want, but I’m curious: why? The difference between 610 and 640 is insignificant, so I don’t really see why you are so interested in changing this. -
Justpi, no I didn’t understand that typing 640px wasn’t enough information because I am new to css. All I know about it is what I have absorbed in the last 3 days.
I want the images at 640px because that’s the size I have uploaded the vast majority of my images as over the last year because I was working on information I had about the main column width being 640px. It’s only in the last 3 days that I’ve discovered media was 610px.
I need the images to display at full size because I am a photographer and trying to present my work as clearly as possible. If the images are compressed even a little bit then my watermarks and logos lose definition. It’s too big a job to reupload all jpgs as pngs and not one I wish to take on.
All I want is clearer images. Thanks for the info re the padding for the captioned images. I’d like to reduce it and I will also review some posts and remove captions.
-
Also, I did notice that the resolution improved significantly when I typed 640px so it has made some improvement just not as much as I’d like.
-
I see… Unfortunately the info on the theme description page is misleading: the max width of the main column is 640, but the actual content is narrower (with white space left and right, inside this 640). The correct info is the one you copypasted:
“The default content width for the Sight theme is 610 pixels.”So, to make the actual content 640px wide, type 640 in the “Content Width” box, and paste this CSS:
@media only screen and (min-width: 769px) { .site-content { width: 68.751%; } #secondary { width: 25.095%; } }This will give give you best possible quality, but only if the 640px wide originals aren’t captioned. If they are captioned, they’ll show at 618px (so that both the image and the grey frame can fit in the available 640). You’ve got many captioned images, so you need to think what to do. Make the content even wider, so it can accommodate 640px captioned images? Remove the grey frame? Other?
-
Thanks for taking the time to look. If we can change the content size to accomodate 640px captioned images that would be great (less work for me). However, I’m wondering if changing this to a figure higher than 640px would stretch the images to try and enlarge them to the new pixel width…. or if they will simply display at their full size.
-
Is there no way to change the column widths?
I think I read that they are not fixed but are responsive / fluid.
If it is flexible then surely a maximum size can be set.
There is a lot of white space/margin when I look at it on my laptop.
I would be happy with a much wider main column. -
“I think I read that they are not fixed but are responsive”
Yes. This means they shrink do adapt to lower resolution screens and mobile devices, but they don’t stretch beyond a certain width. The widths we’ve been discussing are actually maximum widths.“Is there no way to change the column widths?”
I already said that what you’re looking for requires making the main column wider and the sidebar narrower, and that’s what the second code I gave you does.“However, I’m wondering if changing this to a figure higher than 640px would stretch the images to try and enlarge them to the new pixel width”
This would happen if you typed a larger number in the Content Width box. You won’t!So:
a) Type 640 in the Content Width box.
b) Use my first suggestion:
.wp-caption img { max-width: 100%; }c) Turn my second suggestion to this:
@media only screen and (min-width: 769px) { .site-content { width: 73%; } #secondary { width: 20.85%; } }d) Add this too:
.wp-caption { width: 662px !important; }If I haven’t made any mistake, these should give you 640 for both captioned and non-captioned images. The grey caption frame will be approximately flush with the text, non-captioned images will be indented.
-
Note: my solution will make all the grey frames full width (even those of smaller captioned images). If you have inserted smaller captioned images, and you don’t like a full-width frame around them, please link to examples so I can see if and how I can limit the change.
-
That made a big difference, thank you very much!
Having a frame around the images isn’t really a big deal for me as it is very light.
However, it would be handy to know how to change the frame colour, and how to remove it completely if I need or wish to do so in the future.
I would probably have the frame white with a 1px border… much like the text box when you type comments here. -
You’re welcome!
To change the colors of the frame, you add this and change the hex numbers:
.wp-caption { background-color: #F1F1F1; border-color: #D9D9D9; }(The default border is already 1px wide, so you don’t need any code for that.)
To remove the frames, you add this instead:
.wp-caption { background-color: transparent; border-color: transparent; }Keep in mind that you can also use more specific selectors, to make such changes selectively, for instance one category of posts only, or one post only, or even one particular image.
-
- The topic ‘Column size adjustment for Sight theme.’ is closed to new replies.
WordPress.com Forums 