Remove white space between blocks

Hi Lucian,

first of all I have to thank TheMediumUTM!, he was doing his best to help me.
Secondly, I think these white spaces are big problem that the theme has it. Its not only me that have this problem.

Here is the screanshot address that showing these white spaces: http://www.screencast.com/t/psO73z7g
Thought I pasted these codes I still see these white spaces.

What I would like to see is that just these white spaces desapera from the site.

Request
I want to change the themes blocks or modules layout. Here is a website that has a pretty layouts. I want to change some of the modules look likt this websits layout.
Here is the website. http://www.aftonbladet.se
Do you think in the future the themes demo pages would have a similar or closer layou of this above mentioned site?

Regards
Ecofame

So you pretty much want all the whitespace gone at once? That’s a lot of CSS; here’s my shot at it.

First, still keep this:

.td_mod_wrap .meta-info {
display: none !important;
}

Now:

.td_block_wrap {
margin-bottom: 0px;
padding-bottom: 0px;
}

.td_mod_wrap {
margin-bottom: 0px;
}

.td_mod1, .td_mod2, .td_mod3, .td_mod4, .td_mod5, .td_mod6, .td_mod7, .td_mod8, .td_mod9  {
margin-bottom: 0px!important;
}

.block-title {
margin-bottom: 0px;
padding-bottom: 0px;
}

.td_mod_wrap .thumb-wrap {
margin-bottom: 0px;
}

.wpb_row {
margin-bottom: 0px;
}

.td_mod3 {
min-height: 65px;
}

This removes all the whitespace that I could see on your homepage. As others have said, I actually think this is way too dense a style. Having some whitespace is good!… Play with the above numbers until you’re happy with it.

This last bit is the whitespace between vertical elements. It’s experiemntal and I haven’t tested it thoroughly. It’s tricky to get rid of this because it does not play well with the grid layout that the whole theme is designed around (and doesn’t change the overall site width, e.g. your main menu). I would personally avoid using it.

.span1, .span3, .span4, .span6, .span8, .span9, .span11, .span12 {
margin-left: 0px !important;
}

Again, change that number and if necessary separate the individual span classes so you can adjust their margins individually.

Note that it looks like you have a row after your video in the page editor, which is the source of the whitespace between that and the footer. You also have a text widget in the sidebar, which is the source of the whitespace above the socials widget.

There may also be whitespace elsewhere on your site that’s not on the homepage. Most of it would be caught by the above, I think…

Hi TheMediumUTM;

Thank you again.
Now it looks good and I like it. As you can see there is little problem that is margin from the left and the space between the header and block slide.
When I checked how the site apears on mobile the margin left problem seem clear.

This is what i did. I put all the css codes together, changed px values, copied all of them and pasted in theme panels costom css area.

.span1, .span3, .span4, .span6, .span8, .span9, .span11, .span12 { margin-left: 20px !important; }
.block-title { margin-bottom: 10px; padding-bottom: 10px; }
.td_mod_wrap .meta-info {display: none !important;}
.td_block_wrap { margin-bottom: 0px; padding-bottom: 10px; }
.td_mod_wrap { margin-bottom: 10px; }
.td_mod1, .td_mod2, .td_mod3, .td_mod4, .td_mod5, .td_mod6, .td_mod7, .td_mod8, .td_mod9 { margin-bottom:
10px!important; }
.td_mod_wrap .thumb-wrap { margin-bottom: 10px; }
.wpb_row { margin-bottom: 10px; }
.td_mod3 { min-height: 65px; }

Regards
Ecofame

I don’t really know how to fix the left problem; I would probably just drop the CSS for the horizontal whitespace since it’s likely to break the grid. Or at least limit it by screen size:

@media (min-width: 1019px) {
  .span1, .span3, .span4, .span6, .span8, .span9, .span11, .span12 { margin-left: 20px !important; }
}

Space between menu and content, in four directions so you can adjust more easily:

.td-grid-wrap {
padding: 0px 0px 0px 0px;
}

@Ecofame there is a lot of bad in removing every single white space from ur site,it’s bad for “User Experience” on tablets & phones,it’s hard on the user to tap on things if they very close together and that’s one of the things google pagespeed always warns people about don’t make things too close to each other because it’s not good for “User Experience” from mobile devices…

It’s good to remove some white space like what i done too my site,but ur asking to remove it all from the front page then when someone visit ur site from a phone and say they have big fingers it will be a nightmare for them to even browse ur site from there phone..just one of my tips i’m passing on too you…

Thanks again.
The css code between the men and content is not taking away the white space.

Its now time to contact the company and ask to solve these problems.
I appreciate for your help. It helped me a lot.

Best regards
Ecofame

Hi Steven,

Thanks for your good advices.

Best Regards
Ecofame

@Ecofame ur welcome

Welcome and good luck!

Did the new version 4.3 solve all the white space problem at your sites? At mine unfortunately not all. At some blocks there is still white space area. :/

Hi Sergenial,

All the white spaces are reduced as I wished and that is to thank for TheMediumUTM tha helped me a lot.

These are the codes I got from him and pasted in to theme panels costom css area.
————————————————————–

@media (min-width: 1019px) {
.span1, .span3, .span4, .span6, .span8, .span9, .span11, .span12 { margin-left: 20px !important; }
}
.td_mod_wrap .meta-info {
display: none !important;
}
.td_block_wrap { margin-bottom: 0px; padding-bottom: 10px; }
.td_mod_wrap { margin-bottom: 10px; }
.td_mod1, .td_mod2, .td_mod3, .td_mod4, .td_mod5, .td_mod6, .td_mod7, .td_mod8, .td_mod9 { margin-bottom:
10px!important; }
.td_mod_wrap .thumb-wrap { margin-bottom: 10px; }
.wpb_row { margin-bottom: 10px; }
.td_mod3 { min-height: 65px; }
.td-grid-wrap {
padding: 10px
}

Now I am happy with how the home page looks. There is only one problem and that is that the content-wrap has margin left.

here is my site:
http://www.ecofame.com

good luck
ecofame

I’m having a another issue with white space between my blocks that i need to remove…i’ll like to bring them a lil closer there are too much white space between them..

I see what you meant Ecofame and thanks for your reply. What I meant is that the new 4.3 version which came out at last friday should have fixed all the “space” problems, so you would not need the custom css code anymore. But unfortunately it didnt at least at my project.

I still need another fix for mine…

What theme version are you currently running?

The last one that came out…but those images i posted yesterday i need a fix for them..

Hi Lucian,
Will the code you provided

.td-grid-wrap .wpb_row {
margin-bottom: 0px;
}

work with my site’s issue?
It appears when a post has no feature image attached to it.
http://www.screencast.com/t/kxx3NrBm9
http://www.businessmirror.com.ph/
Thanks

Thanks for the prompt reply, Lucian.
Will try that out.
Best regards