en WordPress.com Forums › CSS Customization

How to make the width of the page full-width?

  • Author
    Posts
  • #1508228

    tashikelzang

    Hi I want to make my page to full-width. Also I would like to arrange my menus on the top of the page in horizontal manner. Currently my menus are in vertical line at the right side of the page.
    Please do help I have no idea of CSS coding.
    Thanks
    my blog: http://kalsangphotography.wordpress.com/

    The blog I need help with is kalsangphotography.wordpress.com.

    #1508399

    thesacredpath
    Staff

    Widening Autofocus is a good bit of work, but it can be done. You first set the overall width of the container and content, and then you have to adjust the widths of all the feature images so that they retain their locations and proportions in relationship to each other. I’ve done that below for an 1100px width.

    #access, div.menu-home-container, #access ul, div.menu ul, #header {
    width: 100%;
}

.featured-position-0, .featured-position-10 {
    margin: 0 5px 5px 0;
    width: 790px;
}

.featured-position-1, .featured-position-11 {
    width: 300px;
}

.featured-position-2, .featured-position-12 {
    margin: 0 5px 5px 0;
    width: 645px;
}

.featured-position-3, .featured-position-13 {
    width: 445px;
}

.featured-position-4, .featured-position-14, .featured-position-5, .featured-position-15 {
    margin: 0 5px 5px 0;
    width: 425px;
}

.featured-position-6, .featured-position-16 {
    width: 235px;
}

.featured-position-7, .featured-position-17 {
    margin: 0 5px 5px 0;
    width: 295px;
}

.featured-position-8, .featured-position-18 {
    margin: 0 5px 5px 0;
    width: 465px;
}

.featured-position-9, .featured-position-19 {
    width: 325px;
}

    For the header image, you would have to make a new one 1100px in width and then put the URL of that image into the background declaration here, where it says, URL_OF_IMAGE between the quote marks. I included the height declaration in the event you wish the header image to be a different height as well.

    #header-image {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 216px;
    width: 1100px;
}

    For the menu this will do it. You may want to do some additional styling, but this will give you a starting point.

    #access li, div.menu li {
    display: inline-block;
    margin-right: 20px;
    width: auto;
}

#access ul ul, div.menu ul ul {
    right: -95px;
    top: 22px;
}
    #1508430

    tashikelzang

    Hello sir,

    Thank you for your kind help, however, when i paste this code in the css it doesn’t change the page’s appearance after publication, though i can see the changes in custom page(The photos become scattered and most pages are left blank). I would just like to edit the menu bars on the top in horizontal manner.
    Thank you once again.

    #1508437

    thesacredpath
    Staff

    Gaaahhhh! Sorry, I missed copy/pasting one rule – an important one. Paste in the following and see what you think.

    #access, div.menu-home-container, #access ul, div.menu ul, #header {
width: 100%;
}

#access li, div.menu li {
display: inline-block;
margin-right: 20px;
width: auto;
}

#access ul ul, div.menu ul ul {
right: -95px;
 top: 22px;
}

#container, #content {
width: 1100px;
}

#access, div.menu-home-container, #access ul, div.menu ul, #header {
width: 100%;
}

.featured-position-0, .featured-position-10 {
margin: 0 5px 5px 0;
width: 790px;
}

.featured-position-1, .featured-position-11 {
width: 300px;
}

.featured-position-2, .featured-position-12 {
margin: 0 5px 5px 0;
width: 645px;
}

.featured-position-3, .featured-position-13 {
width: 445px;
}

.featured-position-4, .featured-position-14, .featured-position-5, .featured-position-15 {
margin: 0 5px 5px 0;
width: 425px;
}

.featured-position-6, .featured-position-16 {
width: 235px;
}

.featured-position-7, .featured-position-17 {
margin: 0 5px 5px 0;
width: 295px;
}

.featured-position-8, .featured-position-18 {
margin: 0 5px 5px 0;
width: 465px;
}

.featured-position-9, .featured-position-19 {
width: 325px;
}

    I see you got the menu horizontal. The above also contains the code for the menu (the first three rules in the list).

    #1508444

    tashikelzang

    Hello sir,
    It looks more than perfect when i paste this to CSS in customize page, however, after publishing it it doesn’t take effect to the real blog page.
    I thank you for your great help.

    #1508445

    tashikelzang

    Or do i upgrade custom design in order to take effect? But the appearance you gave was exactly the way i wanted to look. Thanks

    #1508457

    thesacredpath
    Staff

    Yes, you have to have the Custom Design upgrade to make changes to the CSS.

    #1508458

    tashikelzang

    OK thank you

  • Author
    Posts

The topic ‘How to make the width of the page full-width?’ is closed to new replies.