ENFOLD – how to reduce width of site and overall spacing

Hello Ismael

Thanks for your help with this, it’s much appreciated.

So far I’ve added the 2 pieces of CSS outlined above and am happy with the result, so thanks for that.

Working Progress:
http://www.jelfon.com/nr1/

There is one more issue that I did outline originally, see my first post, but I’m now outlining the issue in more details below:

“… and reduce the default spacing from the current 50px to 25px“

I’ve just spent ages trying to figure this out, and although I was getting very close by making various further CSS customizations, things weren’t quite working correctly still especially in responsive modes, so I’d appreciate a bit more help with this aspect.

As far as I can tell all content is indented by approx 50px (sides and top) at the moment and I’d like to be able to adjust this to either 30px or 25px.

Below should be an image illustrating with blue boxes the spacing elements that are currently approx 50px, I’d like to be able to change these to 30px or 25px to tighten it all up a bit design wise.

Thanks again
Joe

• This reply was modified 10 years, 12 months ago by joerainbow.

Hello Ismael

Thanks for your latest response and for the extra CSS.

I am happy with the overall width of things I just want to reduce the spacing properly as outlined above.

I tried adding the latest CSS elements outlined above to reduce the spacing and it doesn’t work properly when I add it, so I’ve removed the latest CSS as outlined in your latest response.

The bottom section of this post is the current CSS I have in my Child Theme.

When I added the code below for example, the responsive menu also sat on the far right with no space which doesn’t look good.

Adjust the menu right margin using this:
#header_main_alternate .container {
margin: 0;
}

Can I maybe send you the WP login info and get you to have a look. If so, please let me know where to send this privately, thanks.

CSS CODE BELOW DOTS:
……………………………………….
/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/*Add your own styles here:*/

.social_header .phone-info span {
font-weight: normal;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
font-size: 11px;
}

.responsive #header_meta .social_bookmarks {
padding-bottom: 0px;
width: 100%;
}

.main_color .heading-color, .main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6, .main_color .sidebar .current_page_item > a, .main_color .sidebar .current-menu-item > a, .main_color .pagination .current, .main_color .pagination a:hover, .main_color strong.avia-testimonial-name, .main_color .heading, .main_color .toggle_content strong, .main_color .toggle_content strong a, .main_color .tab_content strong, .main_color .tab_content strong a, .main_color .asc_count, .main_color .avia-testimonial-content strong, .main_color div .news-headline {
color: #90d200;
font-weight: normal;
}

p + h3, p + h4, p + h5, p + h6 {
margin-top: 0px;
}

.title_container { display: none; }

#top .main_menu .menu > li:last-child > a {
padding-right: 13px;
}

.logo img {
display: block;
height: auto;
max-height: 100%;
padding: 0;
width: auto;
}

/* #Desktop – Large
================================================== */@media only screen and (min-width: 1140px) {
.responsive .boxed#top {
width: 960px;
}
.responsive .container {
width: 860px;
}
.responsive .container .one.unit,
.responsive .container .one.units {
width: 20px;
}
.responsive .container .two.units {
width: 30px;
}
.responsive .container .three.units {
width: 120px;
}
.responsive .container .four.units {
width: 210px;
}
.responsive .container .five.units {
width: 300px;
}
.responsive .container .six.units {
width: 390px;
}
.responsive .container .seven.units {
width: 480px;
}
.responsive .container .eight.units {
width: 570px;
}
.responsive .container .nine.units {
width: 660px;
}
.responsive .container .ten.units {
width: 750px;
}
.responsive .container .eleven.units {
width: 840px;
}
.responsive .container .twelve.units {
width: 930px;
}
.responsive #top.boxed .stretch_full {
width: 960px;
}
.responsive #top .offset-by-one {
padding-left: 90px;
}
.responsive #top .offset-by-two {
padding-left: 180px;
}
.responsive #top .offset-by-three {
padding-left: 270px;
}
.responsive #top .offset-by-four {
padding-left: 360px;
}
.responsive #top .offset-by-five {
padding-left: 450px;
}
.responsive #top .offset-by-six {
padding-left: 540px;
}
.responsive #top .offset-by-seven {
padding-left: 630px;
}
.responsive #top .offset-by-eight {
padding-left: 720px;
}
.responsive #top .offset-by-nine {
padding-left: 810px;
}
.responsive #top .offset-by-ten {
padding-left: 900px;
}
.responsive #top .offset-by-eleven {
padding-left: 990px;
}
}

@media only screen and (max-width: 767px) {
.responsive.social_header .phone-info {
position: relative;
top: 10px;
}
}

.bottom_nav_header.social_header .main_menu ul:first-child > li a {
border-right-style: solid;
border-right-width: 1px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
text-transform: uppercase;
font-weight: bold;
}