How to configure Screen-wide? Less white space?

Community Forums Forums Design Tips and Tricks How to configure Screen-wide? Less white space?

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  Davinder Singh Kainth 6 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #99782

    fabsfabian
    Member
    Post count: 6

    I’m taking my first steps with Genesis and with wordpress. I like it a lot, but have three simple (I think) questions:

    1) How can I reduce the hight of the header? I would like it to be less tall, so there’s less white space above the logo and menu and less white space below the logo and menu.

    2) I would like the body to be screen wide, with almost no white space on the left and on the right side.

    3) I would like the body (the slideshow, on my site) to be closer to the header. Meaning: less white space above the slideshow.

    From what I understand, I must change the CSS. If so, can you please tell me where and whit which values to experiment.
    Here’s the site: http://69.195.124.209/~fabsfabi/
    Using the Genesis Sample child theme.

    Thank you in advance for your support.

    http://69.195.124.209/~fabsfabi/
    #99790

    Davinder Singh Kainth
    Participant
    Post count: 1291

    1. To reduce space in header area, change following code:

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background-color: #fff;
    }
    
    .site-header .wrap {
    	padding: 10px 0;
    	padding: 4rem 0;
    }

    TO

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background-color: #fff;
    }
    
    .site-header .wrap {
    	padding: 5px 0;
    	padding: 0.5rem 0;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #99791

    Davinder Singh Kainth
    Participant
    Post count: 1291

    2. For wide screen layout, look for following code.

    /* Site Containers
    --------------------------------------------- */
    
    .site-inner,
    .wrap {
    	margin: 0 auto;
    	max-width: 1140px;
    }

    Change this to following

    /* Site Containers
    --------------------------------------------- */
    
    .site-inner,
    .wrap {
    	margin: 0 auto;
            width: 100%;
    }

    Also, you can make corresponding adjustments to content and sidebar area’s width.


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #99792

    Davinder Singh Kainth
    Participant
    Post count: 1291

    3. To reduce area at top of slider, look for following code:

    /* Entries
    --------------------------------------------- */
    
    .entry {
    	background-color: #fff;
    	border-radius: 3px;
    	margin-bottom: 40px;
    	margin-bottom: 4rem;
    	padding: 40px 40px 24px;
    	padding: 4rem 4rem 2.4rem;
    }

    Change above to the following

    /* Entries
    --------------------------------------------- */
    
    .entry {
    	background-color: #fff;
    	border-radius: 3px;
    	margin-bottom: 40px;
    	margin-bottom: 4rem;
    	padding: 10px 40px 24px;
    	padding: 1rem 4rem 2.4rem;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #99794

    fabsfabian
    Member
    Post count: 6

    Thank you Davinder!
    It worked!
    You rock, rock, rock!!! :)
    Just one more question, if you have the time:
    Now that I changed those settings and have the site set up for wide screen, I notice that the header is wider. There’s absolutely no white space on the sides of the header, but a little white space on the sides of the body. Can I ask for your help to fix the header so that it aligns with the body.
    Here, tak e a look, if you can: http://69.195.124.209/~fabsfabi/

    #99795

    fabsfabian
    Member
    Post count: 6

    OK, I think I found out through trial and error :)

    Added this:
    margin: 0 auto;
    width: 94%;

    to the .site-header .wrap { section.
    That seems to align it.
    Thank you for all the previous support!!!!!!!!!

    #99903

    Davinder Singh Kainth
    Participant
    Post count: 1291

    Yes, it looks aligned now. If still an issue, update this thread.


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.