CODEWITHSUNDEEP
zurb-foundation
Kalaivani Nair
Kalaivani Nair

Reputation: 39

How to customise foundation-zurb div for tablet and mobile?

I just wanna know the correct class to use for divs..currently my index page content divs look as below: mine

This is okay for dekstop view, I used class="large-4 columns" for the above. But I want something like below for tablet and mobile view.

theirs

How do I achieve this plz?

I TRIED but din't work as i wanted.

<div class="large-4  columns">
 <div class="medium-2 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-10 columns">
<h1>LAUNCH OF THE XXXX</h1>
XXXXX, a pioneering voluntary industry-wide initiative that is dedicated to the development and advocacy of professional standards, including ethical standards, was launched on 24 September 2014. The event was officiated by both the Governor of Bank Negara Malaysia and Chairman of the Securities Commission Malaysia and was attended by leaders of the financial services industry.
</div>
</div>

Upvotes: 0

Views: 47

Answers (2)

cport1
cport1

Reputation: 1185

If your settings has 12 total columns it should be like this:

<div class="row">
 <div class="medium-12 large-4 columns">
<!--inaugural-->
 </div>
 <div class="medium-12 large-4 columns">
<!--launch-->
 </div>
 <div class="medium-12 large-4 columns">
<!--insights-->
 </div>
</div>

Upvotes: 2

general03
general03

Reputation: 863

I think your first tag is not at good place 

<div class="row">

  <div class="large-12 columns">LARGE VIEW</div>
  <div class="medium-4 columns">
     <img src="images/launch-home.png" alt="" height="60px;" />
  </div>
  <div class="medium-8 columns">
     <h1>LAUNCH OF THE XXXX</h1>
     ...
  </div>
</div>

Upvotes: 0

Related Questions