html - zurb foundation grid x cols dont stack on mobile

Question

how do you stack cells on mobile in zurb foundation?

this is my code:

<div class="grid-container">
        <div class="grid-x grid-padding-x align-center">
                <div class="cell small-3">
                    <img src="<?php echo $leader_section['leader_section_image']['url']; ?>" alt="G2 Leader winter 2021" />
                </div>
                <div class="cell small-6">
                    <h2 style="text-align: left;"><?php echo $leader_section['leader_section_header']; ?></h1>
                    <p style="text-align: left;"><?php echo $leader_section['leader_section_content']; ?></p>
                    <a class="line-link" href="<?php echo $leader_section['leader_section_link']['url']; ?>"><?php echo $leader_section['leader_section_link']['title']; ?></a>
                </div>
        </div>
    </div>

Zurb Foundation 5: Grid Column Stacking

<div class="grid-container">
        <div class="row">
            <div class="grid-x grid-padding-x align-center">
                            <div class="cell small-3">
                                <img src="<?php echo $leader_section['leader_section_image']['url']; ?>" alt="G2 Leader winter 2021" />
                            </div>
                            <div class="cell small-6">
                                <h2 style="text-align: left;"><?php echo $leader_section['leader_section_header']; ?></h1>
                                <p style="text-align: left;"><?php echo $leader_section['leader_section_content']; ?></p>
                                <a class="line-link" href="<?php echo $leader_section['leader_section_link']['url']; ?>"><?php echo $leader_section['leader_section_link']['title']; ?></a>
                            </div>
            </div>
        </div>
    </div>

it doesn't work, they still are horizontal on mobile.

What to use to create a custom grid layout on Zurb Foundation

I'm trying to mess around with the large small classes etc nothing is working.

https://get.foundation/sites/docs/flex-grid.html

Per the zurb docs:

Columns in a flex grid will not wrap if not given an explicit size—this is what allows the magical auto-sizing to work. To make columns stack on smaller screens, add the class .small-12 manually.

I have a size set.

What am I doing wrong? Howcome this isn't stacking on mobile?

In my same codebase, I have this and it works (stacks correctly on mobile) and I dont know why:

  <?php if ( get_sub_field('section_title') ): ?>
    <div class="grid-x grid-container medium-grid mb-25">
      <div class="cell small-12 intro-text u-centered">
        <?php echo get_sub_field('section_title'); ?>
      </div>
    </div>
  <?php endif; ?>

   <?php if( have_rows('rows') ): ?>
      <?php while ( have_rows('rows') ) : the_row(); ?>
        <div class="grid-container">
          <div class="grid-x grid-margin-x align-center basic-columns animate-columns" data-equalizer="cols">
            <?php $width = get_sub_field('column_width'); ?>

             <?php if( have_rows('columns') ): ?>
                <?php while ( have_rows('columns') ) : the_row(); ?>

                  <?php $icon_color = get_sub_field('icon_color'); ?>

                  <div class="cell small-12 <?php echo $width; ?> basic-column <?php echo $icon_color . '-icon-col'; ?>">

                    <?php if ( get_sub_field('icon') ): ?>
                      <?php get_template_part('parts/module', 'icon');?>
                    <?php endif; ?>

                    <?php the_sub_field('content'); ?>

                    <?php if ( get_sub_field('cta') ): ?>
                      <?php $cta = get_sub_field('cta'); ?>
                      <a href="<?php echo $cta['url'] ?>" target="<?php echo $cta['target'] ?>" class="line-link"><?php echo $cta['title'] ?></a>
                    <?php endif; ?>

                  </div>

                <?php endwhile; ?>
            <?php endif; ?>

          </div>
        </div>

      <?php endwhile; ?>
  <?php endif; ?>

question from:https://stackoverflow.com/questions/66050593/zurb-foundation-grid-x-cols-dont-stack-on-mobile

Answer 1

Waitting for answers