Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to configure Screen-wide? Less white space?
- This topic has 6 replies, 2 voices, and was last updated 10 years ago by Davinder Singh Kainth.
-
AuthorPosts
-
April 12, 2014 at 6:09 am #99782fabsfabianMember
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/April 12, 2014 at 7:56 am #99790Davinder Singh KainthMember1. 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; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesApril 12, 2014 at 7:58 am #99791Davinder Singh KainthMember2. 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.
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesApril 12, 2014 at 8:00 am #99792Davinder Singh KainthMember3. 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; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesApril 12, 2014 at 8:32 am #99794fabsfabianMemberThank 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/April 12, 2014 at 8:48 am #99795fabsfabianMemberOK, 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!!!!!!!!!April 12, 2014 at 9:22 pm #99903Davinder Singh KainthMemberYes, it looks aligned now. If still an issue, update this thread.
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.