Make body of theme wider
-
How can I use CSS to make the body of text on my pages wider?
The blog I need help with is: (visible only to logged in users)
-
Hi Deborah!
Please add the following CSS code:
@media screen and (min-width: 881px) .page .page { padding: 50px 0; }Hope it helps =)
-
-
-
Oh please, replace the code I sent, try this one instead:
@media screen and (min-width: 881px){ .page .page { padding: 50px 0!important;} } -
-
I wonder if you would know any tricks to my other questions, such as, can the widgets at the bottom be moved to the side? And is there any way to adds a featured image to a category page?
-
Also, that code fixed the pages perfectly, but when I click onto the individual blog posts, they still have the same original more narrow page width. Is there a way to get the individual blogs appear the same width as the pages?
-
Hi again!
It seems that the Imbalance theme only display widgets at the bottom area, not really sure if there’s something with can fix with CSS.
In the meantime, we can fix the narrow post area with this code (please, replace the code I sent you):
@media screen and (min-width: 881px){ .page .page, .single .hentry .entry-content { padding: 50px 0!important;} }Regarding adding a featured image to a category page, that is possible with some coding yes:
This will add an area before the category name and description for example:
.category header.page-header:before { content: ''; display: block; width: 100%; background-repeat: no-repeat; background-size: cover; height: 200px; margin-bottom: 60px; }…and this code will add the image:
/* category forgetting-to-remember*/ .category-forgetting-to-remember header.page-header:before { background-image: url(https://rebalancedemo.files.wordpress.com/2011/07/leaf-733739_1920.jpg); }In order to add a different image to every category you will need to copy-&-paste the code above, change the category name and the image you want to use.
Please let us know if this worked ok =)
-
I changed the code to make the individual posts appear like the pages with the wider look, but it didn’t work…:(
Here is one of the posts after I added it.
That is supposed to be added in the CSS portion of the customization menu, correct?
-
-
Before I try the category codes above, they go in the CSS code to the side as well, is that correct? Is there a way to do the same to change the featured image for each of the regular pages as well?
-
Hello,
I’m sorry, the code to enlarge the post are as well should be:
@media screen and (min-width: 881px){ .page .page, .single .hentry .entry-content { padding: 50px 0!important; width:100%} } -
Perfect! That’s great! Thank you!
Now to try the category pages tomorrow. Would that same code work for the page headers by substituting “page header” for category header?
-
You’re welcome =)
On pages, for example the Books page, we can add a featured image, or replace the header image, that would be a little different code because we need to inform the page ID:
.page-id-2417 .site-header-image { visibility: hidden; background-image: url(https://rebalancedemo.files.wordpress.com/2011/07/leaf-733739_1920.jpg); } .page-id-2417 .header-wrap { background-image: url(https://rebalancedemo.files.wordpress.com/2011/07/leaf-733739_1920.jpg); background-repeat:no-repeat; background-position: 0 -1100px /* adjust for tall images */ }This code will replace the header image only for “Books” page. That can be a lot of code but if you only want to use on some pages that would not be too much =)
-
-
Does the image I use have to be the exact size for the header? I can put it in but it stretches it out too big.
- The topic ‘Make body of theme wider’ is closed to new replies.
WordPress.com Forums 