WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do i fit Post/Page size to browser (11 posts)

  1. lukeroutledge
    Member
    Posted 1 year ago #

    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

  2. lukeroutledge
    Member
    Posted 1 year ago #

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  4. lukeroutledge
    Member
    Posted 1 year ago #

    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

  5. lukeroutledge
    Member
    Posted 1 year ago #

    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

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  7. lukeroutledge
    Member
    Posted 1 year ago #

    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

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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/

  9. lukeroutledge
    Member
    Posted 1 year ago #

    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.

  10. irestmyshowcase
    Member
    Posted 1 year ago #

    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

  11. lukeroutledge
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic