WordPress.org

Ready to get started?Download WordPress

Forums

How To Centerise Fullscreen Theme Homepage? (4 posts)

  1. Adnan_GS
    Member
    Posted 3 years ago #

    Hi guys,

    I am helping to create a portfolio website here - http://bit.ly/gdpKLt - this site uses the Fullscreen Theme.

    I know how to hack my way through HTML and CSS but am struggling to work out how to centerise the homepage of this theme vertically and horizontally for all browsers. It uses absolute positioning and I'm not sure what the appropriate CSS mark-up is here.

    Can anyone help?

    Thankyou!

  2. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

  3. Adnan_GS
    Member
    Posted 3 years ago #

    Thanks Emil.

    Firstly, I've checked line 106 on style.css and I can't see what you're looking at. Can you explain which line isn't finished?

    Also I'm looking to use the 2nd example you linked to: centering using CSS horizontally and vertically. Here's the code I think I need to change:

    /* Home Thumbs & Nav*/
    .home-thumbs { margin-top: 200px; margin-left: auto; margin-right: auto; padding: 0; width: 1600px}
    .bottom-thumbs {position: absolute; top: 440px; left:0;}
    .thumbs { display:hidden; }
    ul.thumbs { width: 1600px; list-style: none; margin: 0; padding: 0; position:relative; top:0; left:80px; right:1600px }
    ul.thumbs li { float: left; width: 160px; height:160px; margin:0; overflow:hidden; }
    ul.thumbs li.thumb-big { float: left; width: 250px; height:250px; margin:0; overflow:hidden; }

    Then a few lines down:

    #branding { background: #000; color:#474747; position:absolute; z-index: 4; left: 80px; top:460px; height:40px; padding:40px; zoom:1; width:1171px; margin:auto; clear: both; display: block; }

    Would you be able to tell me exactly what I need to do?

    Thanks so much.

  4. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Take a look at
    http://validator.w3.org/check?uri=http://www.eajslater.com/&charset=(detect+automatically)&doctype=Inline&group=0

    Line 116, not 106 like I said earlier.

    Let's start with this on http://www.eajslater.com

    .home-thumbs {
        width: 100%;
    }
    
    #branding {
        width: 100%;
        left: 0;
    }

    You may also want to add:

    #container {
        margin: 0 auto;
        width: 960px;
    }

    960px is the content only, so whatever needs to be inside "wrap" around that. Even easier if you can use the same .container just like you have on http://www.eajslater.com/brunel-projects/1st-year/.

Topic Closed

This topic has been closed to new replies.

About this Topic