WordPress.org

Ready to get started?Download WordPress

Forums

Spun
Spun Content width on pages. (52 posts)

  1. contagous
    Member
    Posted 1 year ago #

    I have been playing around with the Spun theme and I am using pages instead of posts for my site.

    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.

    Any ideas?

    I have included a screenshot of what i mean with some lines drawn on it to try and explain as the site it not live yet.

    Window mode:
    https://imageshack.us/scaled/large/849/capturelsi.png

    Full Screen:
    https://imageshack.us/scaled/large/42/captureoql.png

    On the above screenshot, the red box is where the content maxes out. I would like to make it as large as the green box so it spans more width on the site if possible..

    Here is the Demo site with the same restrictions I think. it looks different as I have background.

    http://spun-demo.calobeedoodles.com/2008/09/05/readability-test

    hope this all makes sense.

    Thanks in advance.

    P.S

    Already have a child theme so any modifications can be done there. Just cant figure out what to use lol

    Thanks

    [No bumping. If it's that urgent, consider hiring someone.]

  2. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    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.

  3. contagous
    Member
    Posted 1 year ago #

    @fatzkidWitAjetPak

    Ever figure this out?

  4. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    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.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Help with CSS requires a link to a live site (and custom CSS or a child theme)...

  6. contagous
    Member
    Posted 1 year ago #

    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?

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    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

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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?

  9. contagous
    Member
    Posted 1 year ago #

    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.

  10. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    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. :)

  11. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    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.

  12. traverser11
    Member
    Posted 1 year ago #

    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*/
    
    }
  13. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    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)

  14. contagous
    Member
    Posted 1 year ago #

    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

  15. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    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.

  16. contagous
    Member
    Posted 1 year ago #

    good luck, i will take another look this weekend if i get some time also.

  17. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    I'm working with adjusting the margins relative to center with the header. I will post my results soon.

  18. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    Alright, I edited the content from the code listed above to be the following:

    this

    /* =Content
    ----------------------------------------------- */
    
    .sticky {
    }
    .single .hentry,
    .error404 .hentry,
    .page .hentry,
    .search-no-results .no-results {
    	margin: 0 0 1.5em;
    	left: -5%;
    	padding: 70px 50px;
    	height: auto;
    	width: 100%;
    	position: relative;
    	z-index: 10;

    and this

    /* =Layout
    ----------------------------------------------- */
    
    #page {
    	background: #fff;
    	margin: 0 auto;
    	padding: 0 50px;
    	width: 1000px;
    }

    Now, however, the text in my posts is super narrow if I make the window smaller... is there anyway to adjust the margins to where the text only narrows by a little bit? It gets very tiny...

    From this -- to this.

    So... the width on the content is larger, but it gets very narrow when i adjust my window size a bit. What adjustments should I make so the text doesn't get so tiny?

  19. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    Also, if you want your content centered, you can change the RESET CSS to be "middle" next to vertical-align.

    /* =Reset
    -------------------------------------------------------------- */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: inherit;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: middle; /*changed to middle*/

    Now im still working on how to make the text adjust in smaller width rates...

  20. contagous
    Member
    Posted 1 year ago #

    Did you ever figure this out fully fatzkid?

    looks like you was on your way too.

    Which part of the above would i need?

  21. fatzkidWitAjetPak
    Member
    Posted 1 year ago #

    Try replacing the code you have with the code I put in the two posts above.

    The only thing I am trying to figure out now is how to make the text stay that width and not resize when I make the window narrow. If I narrow the window a bit, the text gets really narrow... I want the banner and all the other content to stay one size so people view my website at a proper width. ;)

    Any ideas? Everything else works great!

  22. contagous
    Member
    Posted 1 year ago #

    OK i'll give it a go and get back to you.

  23. contagous
    Member
    Posted 1 year ago #

    Hmm that doesn't seem to fix mine :S

    I finally have it online now...

    Any ideas?>

    http://contysden.com/site/

  24. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try this:

    .single #primary, .page #primary, .search-no-results #primary, .error404 #primary {
        width: 100%;
    }
    
    .single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {
        width: 90%;
    }
  25. contagous
    Member
    Posted 1 year ago #

    Hmm adding that didn't help, should i remove some of the other code too?

    Can't believe something so simple is so annoying and hard lol

  26. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Looks like you have an error in your custom CSS:

    }
    O
    @media all and (max-width: 480px) {

    Remove that O

    Also, why are you using custom CSS if you have a child theme?

  27. contagous
    Member
    Posted 1 year ago #

    Removed and thanks. Don't think it fixed it though :(

    I dunno i thought they worked together tbh...

    What should i do?

    I'm very new to this CSS/CMS stuff

  28. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No, they are essentially duplicating the same function. Try putting the above code I posted in the child theme style.css file.

  29. contagous
    Member
    Posted 1 year ago #

    ok will do

  30. contagous
    Member
    Posted 1 year ago #

    http://contysden.com/site/

    Seems to of stretched the site and content which is great.

    However now it doesn't shrink with the page. Did you manage to fix that?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic