Menu icon Foundation

Designer | Sydney, NSW, Australia

Peter's a Sydney based UX/UI Designer & Front End Developer. He's an advocate for clean, accessible, user centric design. He's also a Nappy changing machine & surfer.

My Posts

No Content

My Comments

Peter Finlan commented on Suzy van Houten's post over 4 years

Hi Suzy

My name is Peter Finlan - I created the Boxify website you are referring to as an example so I thought I might be able to help here!

Although I used the Bootstrap 3 CSS framework for this website, the principal here is exactly the same using Foundation. You will first need to stretch your .row div out to 100% so that the sibling divs inside (6 column divs) can stretch out to 100% width also. I like to do this by creating a .fullWidth class in my CSS and setting a max-width: 100%; property.

After this you will need to add an extra class to both of your medium-6 column divs, one class that will contain the background-image property, and the other class on the other medium-6 column div to contain the background-color property. Essentially, your code should look something like this:

<div class="row fullwidth collapse">
  <div class="medium-6 columns bg-img">
  </div>
  <div class="medium-6 columns bg-color">
  </div>
</div>

From here, all you need to do is to add some CSS to style your new classes. Firstly, the background-image property on the .bg-img class, and secondly the background-color property to the .bg-color class.

I have created a pen for reference: http://codepen.io/peterfinlan/pen/OPvOBd

Hope this helps :)

Cheers.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Suzy van Houten's post over 4 years

Hi Suzy

My name is Peter Finlan - I created the Boxify website you are referring to as an example so I thought I might be able to help here!

Although I used the Bootstrap 3 CSS framework for this website, the principal here is exactly the same using Foundation. You will first need to stretch your .row div out to 100% so that the sibling divs inside (6 column divs) can stretch out to 100% width also. I like to do this by creating a .fullWidth class in my CSS and setting a max-width: 100%; property.

After this you will need to add an extra class to both of your medium-6 column divs, one class that will contain the background-image property, and the other class on the other medium-6 column div to contain the background-color property. Essentially, your code should look something like this:

<div class="row fullwidth collapse">
  <div class="medium-6 columns bg-img">
  </div>
  <div class="medium-6 columns bg-color">
  </div>
</div>

From here, all you need to do is to add some CSS to style your new classes. Firstly, the background-image property on the .bg-img class, and secondly the background-color property to the .bg-color class.

I have created a pen for reference: http://codepen.io/peterfinlan/pen/OPvOBd

Hope this helps :)

Cheers.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content