Width of content
-
Guys, what I have to put in CSS to change the content width when I post something.
Please visit my blog – http://www.kacperpokorski.com open the random post with text ( for ex. this one – http://kacperpokorski.com/2014/09/27/jura-krakowsko-czestochowska/ )
I would like to keep the layout as it is now, just would like to change width of post to for ex 1000 px. When I open particular post I would like to have feauturet image on top of site as it is now (full screen width) but would also like to increase width of text, pictures, embed videos, etc.
and keep it as it is now on the center of the screen
What should I put into css to get such effect?Thanks in advance
The blog I need help with is: (visible only to logged in users)
-
Hi there,
I would like to keep the layout as it is now, just would like to change width of post to for ex 1000 px
One thing I’ll mention is that typically for easy reading you want to keep your content between 500 and 750px, but due to the larger font in the body of your posts and pages, I think you can get by with probably 900px. Give the following a try and see what you think. You can also change it to 1000px to see how that works. The original width was 740px.
.section-inner.thin { width: 900px; } -
-
One more question. What should I put into css field to change a font size but only inside the post (not the menu font size). I would like to make it a little bit smaller.
Thanks in advance.
-
In Radcliffe, they’ve been a little bit specific on selectors, so the selector below looks a little long, but should catch all text within the post and page content. You can play with the 90% value to get what you are looking for.
.post-content p, .post-content blockquote, .post-content ul, .post-content ol, .post-content li, .post-content address, .post-content dl, .post-content .wp-caption, .post-content pre { font-size: 90%; } -
Hi there, got one more issue regarding my blog:
The logo on the top of blog is a header image ( 1440×230 pix). but it’s not a clickable link to my homepage. To have a clickable link I have to add logo image but when I try to add the same file (1440×230 pix) as a logo image it become very small.
How can I change it to have fully clickable logo image instead of header image but not so small? -
Go to Appearance > Customize > Site title… and display the site title again, and then paste in the following CSS which makes it invisible and adjusts it to where it overlays the header image and makes it clickable.
.blog-title { display: block; line-height: 200px; top: -230px; width: 1440px; } .blog-title a { color: rgba(0, 0, 0, 0); display: block; } .blog-title a:hover { color: rgba(0, 0, 0, 0); } -
-
I’m seeing your Enjoy Life header image large. The code I gave was to keep that image and make it clickable. Are you wanting something other than that?
-
Yes, cause I put it back as it was previously. But it’s not clickable logo, it’s a header image.
But my question was how to put clickable, full size logo instead of header image. And when I did as You advise, when I disable header image and enable logo it appear, it’s clickable but very small (and logo is 1440×230 pix ).
If You could give me Your email I will send You a screenshot. -
Normally site logos are clickable when inserted. Can you put it back and let me take a look? I can probably do the same trickery in CSS to move the invisible title div over the top of it.
-
-
-
-
Add this to your custom CSS and see what you think.
.site-logo-link { background: transparent url("https://kacperpokorski.files.wordpress.com/2015/05/cropped-nowe-logo-bloga61.png") no-repeat scroll center top; height: 230px; width: 1440px; left: 0; transform: none; } .site-logo-link .site-logo { display: none; } -
Thanks but still something’s wrong. When I paste the code like You said the logo it’s not scalling automatically. For ex. my computer is 1280×800 pix (13 inch MacBook). When I paste Your code the width of main page is automatically resize to 1440 pix which give me white empty field on right side of the screen.
-
I must have grabbed the wrong image URL from your Media Library. This is the URL to use.
https://kacperpokorski.files.wordpress.com/2015/05/cropped-nowe-logo-bloga61.pngThe other thing to consider is that there is a ton of whitespace on each side of the image. The logo stuff in the middle is much smaller.
I can’t use your logo image since it is actually downsized by WordPress into a smaller 150px x 24px image. I have to use one of your header images.
-
OK, what’s Your screen resolution?
I put the code like this:
.site-logo-link {
background: transparent url(‘https://kacperpokorski.files.wordpress.com/2015/06/nowe-logo-bloga7.png’) no-repeat scroll center top;
height: 200px;
width: 1280px;
left: 0;
transform: none;
}Could You please take a look on Your screen (if it’s bigger then mine 1280×800) does still blog have white field on right?
Does logo is center? -
-
Ehh. So its not in the center. If i put the code like You gave me but change the width to my screen resolution 1280 it is ok only on such displays. On Yours the whole content is centered except logo. It’s moved more to left and huge white space on right side of logo :/
Is it possible to make it centered no matter how big the display will be?
- The topic ‘Width of content’ is closed to new replies.
WordPress.com Forums 
