Resizing a block on a drupal 7 website

Question

I have three blocks A, B and C on the home page on location Content Bottom. I have another block D I want to place at location A+B and I want to keep C at the same location. I will move A and B to another location on the layout. How to do that? Currently when I place block D at Content Bottom it only takes the space (and width) of block A and other two columns look Odd. Block D now shows up as a single long column. Not a developer, using Drupal for three years, always learning more about Drupal. I know a little bit about css files and css injector.

If I place block D at Tertiary Content location, it takes the whole width of the screen. It shows below the region for A, B and C.

Answer 1

The block widths are most likely controled by the theme CSS and it seems each block is given a third of the width of the container.

To change that and make one block take up two thirds of the container width you have to override the theme CSS. Exactly which selector and declarations to use depends on your particular case. You enter your overrides in the CSSinject or a similar module that overrides CSS through the interface.

If your theme is using floats, then you can find with your browser dev tools which selector was used to set that and the width, then use that same selector but with your own declaration override, something like:

.special-region .block {
  width: 60%;
}

If the layout method isn't floats then you'll have to adjust accordingly.

One other thing to consider is that this is most likely only code for wide screens, and it should be different for mobiles. Usually the mobile styles stack blocks one on top of the other so you won't have to do anything there, but you'll have to restrict your float to the same @media query as used by the theme, for example:

@media screen and (min-width: 900px) {
  .special-region .block {
    width: 60%;
  }
}

You can find out about which media query is being used through the browser dev tools.