I am trying to do the same thing. I have figured out how to customize many things, including the banner, fading animation of the content circles, and under construction site… but I can’t make my website wider.
Someone help, we noobs have no idea what we are doing here.
I have not. I have been messing around with every “margin” I can find in the editing section. I want two things:
A wider width for website content.
Fixed content so it stays in one spot and doesnt move when i increase and decrease the window size.
This forum has helped me out immensely in figuring out plugins for further browser compatibility, but no one seems to respond to the number of “how do i change the width” threads.
Help with CSS requires a link to a live site (and custom CSS or a child theme)…
Help with CSS requires a link to a live site (and custom CSS or a child theme)…
that is all in my first post… As the demo site is exactly the same ans i have the custom css and child theme setup.
What is your point?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
As the demo site is exactly the same
It doesn’t look exactly the same.
Excerpt of demo site: http://awesomescreenshot.com/0f81d9o8e3
Excerpt of your site: https://imageshack.us/scaled/large/849/capturelsi.png
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I can’t for the life of me figure out how to expand the width of the content sections on the pages to fit the page more.
Are you familiar with CSS?
If so, what CSS did you try?
It’s exactly the same just different font and zoomed in…
I have tried some CCS code within CCS Manager and some editing of the childtheme fuctions.php, content.php and a even html editing on the content itself.
I don’t really know what im doing but its all in a chiild theme so i know im safe.
Tried the following in fucntions.php and edited the width size bolded
/**
* Set the content width based on the theme's design and stylesheet.
*
* @since Shape 1.0
*/
if ( ! isset( $content_width ) )
$content_width = <strong>654;</strong> /* pixels */
I’ve also tried several different things in CSS but don’t have the list on me right now. would have to go through my history to check on that.
I have tried editing the CSS stylesheet in the above way as well. I have also tried editing the CSS “width” here…
/* =Layout
----------------------------------------------- */
#page {
background: #fff;
margin: 0 auto;
padding: 0 50px;
width: 1000px;
}
here…
}
.single #primary,
.page #primary,
.search-no-results #primary,
.error404 #primary {
clear: both;
margin: 0 auto;
width: 800px;
and here…
/* =Content
----------------------------------------------- */
.sticky {
}
.single .hentry,
.error404 .hentry,
.page .hentry,
.search-no-results .no-results {
margin: 0 0 1.5em;
padding: 70px 50px;
width: 700px;
height: auto;
z-index: 10;
}
No luck for me. I am using the exact same thing contagous is using. Thank you all for bearing with us. š
I am currently messing with the margins… but perhaps this is going to take an edit of margins AND width pixels. Hmmm.
For reference, here is my website:
http://www.psysum.anomalisticrecords.com
And I want my posts content to simply be wider. The text area is very narrow in my opinion. I would LOVE the content to be as wide as the main page is. Look at all that space… great… but I want the posts to be like that as well.
Hi, I’m new to .css editing but here was my solution to making posts wider. Simply increasingt the width of .hentry will work – but will increase width to the right. Then bumping it back to the left will center it. However this could make the posts unresponsive and illegible on small browser windows.
Anyway, the below code, using percentages rather than pixels for width worked, its not totally responsive or perfect, but it is legible on mobiles and widescreens alike.
.single .hentry,
.error404 .hentry,
.page .hentry,
.search-no-results .no-results {
/*margin: 0 0 1.5em; *//* removed - adding width overlapped navigation arrows */
padding: 20px 0px; /* changed from 70px 50px - want bit more compact anyway*/
width: 120%;/* changed from 700px want it to be 960 */
height: auto;
position:relative; /*added*/
left: -10%;
z-index: 10; /* tried move up from 10*/
}
For whatever reason, this code completely ruined my website. When I put back the original code, the site is still broken. What in the world? It is broken on Firefox, safari, and mobile safari. (I have tried those three so far)
It’s looking ok to me fatz…
The hentry wont help me as its not my posts that i want wider its my pages.
Thanks though
Ok, i was being stupid with the brackets lol. I am working with this code now. I tried copying and pasting but I’m not sure if it actually expanded my content width on posts. I’ll keep trying this out and post my results. I’m going to try putting this code into the other width sections I mentioned above.
good luck, i will take another look this weekend if i get some time also.
