Menu icon Foundation
Best way to create responsive content block with img and text

Hi all,

just started my first foundation project.
I'm looking for the best way to create a responsive content block with an img and text.
Are there any special tricks within foundation to achieve that goal?

Example shows one element.

Problem:
The text breaks often and it is a lot of work to catch all the breakpoints and adjust font-size, for ul and li elements.
This ends up with a lot of media-queries.
Working with the html font-size within the media-queries did not the trick, although I'm using rem and % ?

I also tried to put text (name of the person) on top of the img. But that is even harder to get working.
So I decided to start with the content block.

Thank you for any suggestions.

<div class="row">
    .... some content
    <div class="small-12 medium-7 columns">
    ..some content ....
    </div>
    
    <div class="small-12 medium-5 columns vcard-container">
      
        <article class="vcard small-12 columns">
                    
            <div class="vcard-img">
                <img class="reponsive-image" src="/img/sampleimg.jpg'; ?>">
            </div> <!-- vcard-img -->
                 
            <ul class="vcard-text">
                <li><strong>Sales</strong></li>
                <li>Appointment</li>
                <li>order informationen</li>
                <li>0222 / 33 33 33</li>
            </ul> <!-- vcard-text -->
                  
        </article> <!-- vcard-1 -->
    </div> <!-- end vcard-container--> 
        
</div> <!-- end row -->

Responsiveimg and textcontent-block

Hi all,

just started my first foundation project.
I'm looking for the best way to create a responsive content block with an img and text.
Are there any special tricks within foundation to achieve that goal?

Example shows one element.

Problem:
The text breaks often and it is a lot of work to catch all the breakpoints and adjust font-size, for ul and li elements.
This ends up with a lot of media-queries.
Working with the html font-size within the media-queries did not the trick, although I'm using rem and % ?

I also tried to put text (name of the person) on top of the img. But that is even harder to get working.
So I decided to start with the content block.

Thank you for any suggestions.

<div class="row">
    .... some content
    <div class="small-12 medium-7 columns">
    ..some content ....
    </div>
    
    <div class="small-12 medium-5 columns vcard-container">
      
        <article class="vcard small-12 columns">
                    
            <div class="vcard-img">
                <img class="reponsive-image" src="/img/sampleimg.jpg'; ?>">
            </div> <!-- vcard-img -->
                 
            <ul class="vcard-text">
                <li><strong>Sales</strong></li>
                <li>Appointment</li>
                <li>order informationen</li>
                <li>0222 / 33 33 33</li>
            </ul> <!-- vcard-text -->
                  
        </article> <!-- vcard-1 -->
    </div> <!-- end vcard-container--> 
        
</div> <!-- end row -->
dims over 5 years ago

You can try this, if you have a rough sketch or layout on how the design should look at on large medium and small that would help

<div class="row">
    .... some content
    <div class="small-12 medium-7 large-7 columns">
    ..some content ....
    </div>

    <div class="small-12 medium-5 large-5 columns vcard-container">
      <div class="row">
            <article class="vcard">

                <div class="vcard-img large-12 medium-12 small-12 columns">
                    <img class="reponsive-image" src="/img/sampleimg.jpg'; ?>">
                </div> <!-- vcard-img -->
                <div class="large-12 medium-12 small-12">    
                    <ul class="vcard-text">
                        <li><strong>Sales</strong></li>
                        <li>Appointment</li>
                        <li>order informationen</li>
                        <li>0222 / 33 33 33</li>
                    </ul> <!-- vcard-text -->
                </div> 

            </article> <!-- vcard-1 -->
    </div> 
    </div> <!-- end vcard-container--> 

</div> <!-- end row -->