Menu icon Foundation
Grid layout question

Hi everyone!

I'm porting existing website to be responsive.
Now I'm trying to find efficient way to aligh three information blocks in one line.
Each block consists of image and text (please see a picture attached).

Can anyone point me to the direction of the right Foundation CSS classess and markup?

Thank you!

<!-- 
      This is is old markup and it has to be changed to Foundation
-->

<div class="testimonial-left">    
		<blockquote >
			<div class="content">
					<p>.... LONG paragraph .........</p>
			    <cite>Grand Mööbli Studio OÜ</cite>
			</div>
		</blockquote>
</div>
            

         

align

Hi everyone!

I'm porting existing website to be responsive.
Now I'm trying to find efficient way to aligh three information blocks in one line.
Each block consists of image and text (please see a picture attached).

Can anyone point me to the direction of the right Foundation CSS classess and markup?

Thank you!

<!-- 
      This is is old markup and it has to be changed to Foundation
-->

<div class="testimonial-left">    
		<blockquote >
			<div class="content">
					<p>.... LONG paragraph .........</p>
			    <cite>Grand Mööbli Studio OÜ</cite>
			</div>
		</blockquote>
</div>
            

         
dims almost 5 years ago

you can try the following.
the content will be in a single row in 3 columns for large resolution and up
and will stack in single column for medium and small res

<div class="row">
        <div class="large-4 medium-12 small-12 columns">
            <blockquote>
                <div class="content">
                    <p>.... LONG paragraph .........</p>
                    <cite>Grand Mööbli Studio OÜ</cite>
                </div>
            </blockquote>
        </div>
        <div class="large-4 medium-12 small-12 columns">
            <blockquote>
                <div class="content">
                    <p>.... LONG paragraph .........</p>
                    <cite>Grand Mööbli Studio OÜ</cite>
                </div>
            </blockquote>
        </div>
        <div class="large-4 medium-12 small-12 columns">
            <blockquote>
                <div class="content">
                    <p>.... LONG paragraph .........</p>
                    <cite>Grand Mööbli Studio OÜ</cite>
                </div>
            </blockquote>
        </div>
    </div>

Mikhail Svirkin almost 5 years ago

dims, thanks for your answer!

It works but also I need a logo image to be visible on large screens and not to be visible on medium and small screens.

So I have to add tag in markup (now images are background CSS style).

Probably it can be like that:

 <div class="large-4 medium-12 small-12 columns">
            <blockquote>
                <div class="content">
<IMG class="???" />
                    <p>.... LONG paragraph .........</p>
                    <cite>Grand Mööbli Studio OÜ</cite>
                </div>
            </blockquote>
        </div>

So the question is: how can I get rid of background property to show the image(s) on big sreens and hide the image(s) on small and medium?

dims almost 5 years ago

try "show-for-large-up" css class
check out the visibility classes
http://foundation.zurb.com/docs/components/visibility.html

Alex Scott almost 5 years ago

No need for me here, dims said it!