Support » Theme: Spun » Spun Content width on pages.

  • contagous

    (@contagous)


    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.]

Viewing 15 replies - 16 through 30 (of 51 total)
  • fatzkidWitAjetPak

    (@fatzkidwitajetpak)

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

    fatzkidWitAjetPak

    (@fatzkidwitajetpak)

    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 thisto 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?

    fatzkidWitAjetPak

    (@fatzkidwitajetpak)

    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…

    contagous

    (@contagous)

    Did you ever figure this out fully fatzkid?

    looks like you was on your way too.

    Which part of the above would i need?

    fatzkidWitAjetPak

    (@fatzkidwitajetpak)

    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!

    contagous

    (@contagous)

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

    contagous

    (@contagous)

    Hmm that doesn’t seem to fix mine :S

    I finally have it online now…

    Any ideas?>

    Homepage

    WPyogi

    (@wpyogi)

    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%;
    }

    contagous

    (@contagous)

    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

    WPyogi

    (@wpyogi)

    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?

    contagous

    (@contagous)

    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

    WPyogi

    (@wpyogi)

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

    contagous

    (@contagous)

    ok will do

    contagous

    (@contagous)

    Homepage

    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?

    WPyogi

    (@wpyogi)

    That’s because you have this in the child theme style:

    #page {
    	background: #fff;
    	margin: 0 auto;
    	padding: 0 50px;
    	width: 1000px;
    }

    Take that out.

Viewing 15 replies - 16 through 30 (of 51 total)
  • The topic ‘Spun Content width on pages.’ is closed to new replies.