Reply To: Flex duplicate content

• James

• July 13, 2016 at 3:16 pm

Hi @renee

You got multiple style tags because you’ve added it in the while loop. So, when you have two ‘flex-section’ layouts, the style will be printed twice. If you want to do something like that, I suggest you use the inline CSS code instead. It should be something like this:

<?php if( have_rows('flex-field') ): ?>
    
    <style>  
        .photo-box {
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size:  cover;
              background-size: cover;

        }
        .fore-image {
            background: url(<?php the_sub_field('fore_image'); ?>) no-repeat center;
             background-size: contain;
        }
    </style>
    
    <?php while ( have_rows('flex-field') ) : the_row();?>

        <?php if( get_row_layout() == 'flex-section' ); ?>
                
            <div class="photo-box" style="background: url(<?php the_sub_field('hero_image'); ?>) no-repeat center center fixed;"></div>
            <div class="fore-image" style="background: url(<?php the_sub_field('fore_image'); ?>) no-repeat center;"></div>

I’m not sure regarding the empty URLs issue. After you tried the code I gave you, could you please share some screenshots of the issue?

Thanks 🙂