WordPress.org

Support

Support » Themes and Templates » [Resolved] How do i fit Post/Page size to browser

[Resolved] How do i fit Post/Page size to browser

  • lukeroutledge
    Member

    @lukeroutledge

    Hi,
    Hope this is in the correct forum and not repeating something thats been answered a million times.

    I’ve been building my site using WordPress in the past few days after i was told it was easier than DW but ran into some problems. I’ve stripped the theme of most of the widgets and headings i didnt want. This is the most finished page:

    3/”>http://lukeroutledge.com/struct/sketchbook-i-3/

    however my pages or posts are too large and they overrun causing scroll bars where i dont want them.

    i have tried putting .post{width:700px !important; max-width:700px !important;} in the .css page of the theme but it didnt seem to do anything.

    Any help is greatly appreciated as i am very new to this.

    Luke

Viewing 10 replies - 1 through 10 (of 10 total)
  • lukeroutledge
    Member

    @lukeroutledge

    WPyogi
    Forum Moderator

    @wpyogi

    Hopefully you are using a Child Theme for changes – if not, you will lose all your changes when the theme is updated…not a good thing.

    Start by fixing some mark-up errors before you deal with the CSS:

    http://validator.w3.org/check?uri=http%3A%2F%2Flukeroutledge.com%2Fstruct%2Fsketchbook-i-3%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Then make sure you don’t have any CSS errors preventing your CSS from working…

    lukeroutledge
    Member

    @lukeroutledge

    Thankyou WPyogi.

    I had no idea about child themes so i have now created one and made most of the changes i had previously done (apart from removing the blog title as of yet as i cant remember how i did that)

    However i used validator to check for errors and there was still 10.
    I am unsure.. are these errors in the style.css of the original theme as these arent mistakes i have made.

    how do i correct these mistakes when i am using this code

    @import url("../tabula-rosa/style.css"); to call the theme style

    lukeroutledge
    Member

    @lukeroutledge

    i know have the theme looking how i want it.
    on this page http://lukeroutledge.com/struct/sketchbook-i-3/
    how can i make it so there is no vertical scroll bar.
    How do i resize the background

    Thanks

    WPyogi
    Forum Moderator

    @wpyogi

    The scroll bar appearing or not depends on the size of the user’s screen – doesn’t it? I don’t have a big screen right now so can’t check. As to the other, not sure what you mean by resizing the background.

    lukeroutledge
    Member

    @lukeroutledge

    Hi,
    By background i meant the page size.
    Is there not a way for the page to fit 100% so that no scroll bars ever appear and the page doesnt over run.
    Maybe it is because of the footer, i dont know.

    for example i made this page in Dreamweaver and it fits 100% whatever size screen. (at least i think it does)

    http://lukeroutledge.com/

    cheers

    WPyogi
    Forum Moderator

    @wpyogi

    That works that way because of the CSS applied to that linked page:

    html {
    background: url(ohshitcoloured.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    See: http://www.w3schools.com/css3/css3_backgrounds.asp

    A CSS forum can likely give you more help with that kind of question – for example here: http://csscreator.com/

    lukeroutledge
    Member

    @lukeroutledge

    i know why that works, i found that code and constructed the page.
    I’m new to WordPress and relatively new to code and don’t understand why i cant scale the page to not have a scroll bar.
    Thanks very much for your help , ill look at the other forum.

    irestmyshowcase
    Member

    @irestmyshowcase

    Dude,
    I really like your sculptures 🙂

    Your scroll bars may be caused by the:
    #wrapper {
    padding: 115px 0px 0px;
    margin: 0px;
    width: 1000px;
    }

    And maybe width 100% is better than px.

    Also
    #left-col {
    position: fixed;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px;
    width: 250px;
    min-width: 250px;
    height: 75%;
    min-height: 600px;
    }

    height: auto; is a possible solution. Give those a try, and make your page height shorter to get rid of the y-scroll.

    Yo can also remove the scrolls permanently, but that is not the best solution.

    Hope this helps.

    Peace

    lukeroutledge
    Member

    @lukeroutledge

    Hi irestmyshowcase

    Glad you like my sculptures. That page will hopefully be a horizontally scrolling one if i can work out how to do that.

    I’m sorry though im not sure if your saying i should add this code you suggested to my css file or your just saying that why the bars there.

    You suggested making my page height shorter..but thats what i dont know how to do :/

    thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] How do i fit Post/Page size to browser’ is closed to new replies.