You are here:  » Left Block


Left Block

Submitted by McCloud on Wed, 2020-06-17 14:43 in

Hello David,

on my website i have a lot of space on the left and right side. Is it possible on an easy way to make a left block for the whole site for ads, news and other things and the "normal" site is going a little bit more to the right side?
As example your page here with the block Support Forum, Active Forum, Google Search and at the right side the Submit forum topic. But to use the whole width.

Sry for my bad english and if you dont understand me i look for a better example.

Thank you, Peter

Submitted by support on Wed, 2020-06-17 16:18

Hi Peter,

Sure - the width constraint is part of the Foundation grid .row class so firstly edit html/default.css and add the following code at the end:

  .row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
  }

If you then reload your site (don't forget to do a hard refresh - CTRL+F5 in most browsers - to ensure that the CSS is reloaded) the main body (but not the menu yet) will then be full width.

Next, edit html/menu.php and look for the following code at line 1:

<div class="contain-to-grid">

...and REPLACE with:

<div>

And then add the following code at the very end:

<div class='row'>
  <div class='small-12 medium-2 columns'>
    ... your left side content here ....
  </div>
  <div class='small-12 medium-10 columns'>

Finally, edit html/footer.php and balance the above HTML with the closures at the very top as follows:

  </div>
</div>

The Foundation grid is based on 12 columns - you might want to experiment with alternative values for small- medium- and large- for best results across mobile / tablet / desktop. Larger resolutions inherit, so 'small-2 medium-8' is then 8 columns for all resolutions medium and up;

https://get.foundation/sites/docs-v5/components/grid.html

Cheers,
David.
--
PriceTapestry.com

Submitted by McCloud on Thu, 2020-06-18 14:35

Thank you very much David

It works perfect

Regards, Peter