CSS Column breaking block at the end of column

Asked

Viewed 19 times

0

I’m having trouble doing the masonry menu of a restaurant. I’m not familiar with JS, so I’m creating with CSS Column. And all within wordpress.

The situation is that doing css this way automatically is breaking an entire element and dividing it into 2 columns in this way:

inserir a descrição da imagem aqui

The "hamburger di maiale" part is being divided into 2 columns, and this, when there are 10, 15 categories, will be unviable.

Is there any way to make it not automatically break an element this way?

Obs1: The code I will insert here will not work because it is within Wordpress and I use Advanced Custom Fields to automatically insert the fields, but can help identify the structure.

Obs2: #blocco_centrale is the project’s container div and . blocco_menu are the Divs with the title blocks and food

obs3: I cannot give a fixed height because who will decide the amount of items will be the restaurant.

.img_top_menu{
width: 100%;
height: 500px;
background-image: url('http://streetburguerferrara.local/wp-content/uploads/2020/09/BANNER_TOP-e1601384845664.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-bottom: 50px
}



#blocco_centrale{
width: 1024px;
background-color: #000;
margin: auto;
columns: 2;
column-gap: 2%;
}


#blocco_centrale:after {
  content: '';
  display: block;
  clear: both;
}

.blocco_menu{
  margin: 0 0 15px;
}
#blocco_centrale .blocco_menu .blocco_titolo{
overflow: hidden;
width: 100%;
background-color: #fff;
text-align: center;
}
#blocco_centrale .blocco_menu .blocco_titolo h2{
text-transform: uppercase;
font-family: "Din Condensed Bold"!important;
font-size: 40px;
color: #000;
margin: 0;
padding-top: 20px;
}
#blocco_centrale .blocco_menu .blocco_titolo h3{
text-transform: uppercase;
font-family: "Din Condensed Bold"!important;
font-size: 20px;
line-height: 10px;
color: #000;
margin: 0;
}
#blocco_centrale .blocco_menu .blocco_titolo img{
display: block;
float: left;
width: 20%;
padding: 20px;
}

#blocco_centrale .blocco_menu .blocco_titolo .titolo_categoria{
width: 75%;
float: left;
}
#blocco_centrale .blocco_menu .blocco_lista {
overflow: hidden;
border: #fff solid;
border-width: 0px 5px 5px 5px;
padding: 15px;
}
#blocco_centrale .blocco_menu .blocco_lista h2 {
text-transform: uppercase;
font-family: "Din Condensed Bold"!important;
font-size: 30px;
color: #fff;
margin: 0;
display: inline-block;
}
#blocco_centrale .blocco_menu .blocco_lista sup{
font-family: "Din Condensed Bold"!important;
font-size: 15px;
color: #fff;
margin: 0;
padding-left: 5px;
}
#blocco_centrale .blocco_menu .blocco_lista p{
font-family: "helvetica neue";
font-size: 20px;
color: #fff;
margin: 0;
line-height:20px
}
<?php
/**
 * Template Name: 100% Width - Menu
 * A full-width template.
 *
 * @package Avada
 * @subpackage Templates
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
    exit( 'Direct script access denied.' );
}
?>

<?php get_header(); ?>


<section id="content" class="full-width">
    <div class="img_top_menu"></div>

    <div id="blocco_centrale">

    <!--Inicio Repeater Categoria-->
    <?php if(have_rows('categoria' , 'option')): while(have_rows('categoria' , 'option')) : the_row(); ?>

        <div class="blocco_menu">

            <!-- Grupo Título  -->
            <?php if(have_rows('gruppo_titolo')): while(have_rows('gruppo_titolo')) : the_row(); ?>
            <div class="blocco_titolo">            
                <div class="titolo_categoria">
                    <h2><?php the_sub_field('titolo_categoria'); ?></h2>
                    <h3><?php the_sub_field('sub_titolo_categoria'); ?></h3>
                </div>
                <img src="<?php the_sub_field('img_categoria'); ?>"  alt="">
            </div>

            <div class="blocco_lista">

                <!-- Início repeater produtos  -->
                <?php if(have_rows('items_categoria' , 'option')): while(have_rows('items_categoria' , 'option')) : the_row(); ?>
                    <h2><?php the_sub_field('nome_item'); ?> · €<?php the_sub_field('prezzo_item'); ?></h2><sup><?php the_sub_field('allerg_item'); ?></sup>
                    <p><?php the_sub_field('descrizione_item'); ?></p>
                <?php endwhile; else : endif; ?>
                <!-- Final repeater produtos  -->

            <?php endwhile; else : endif; ?>
            <!-- Final Grupo Título  -->

            </div>
        </div>

    <?php endwhile; else : endif; ?>
    <!-- Final Repeater Categoria  -->

    </div>
</section>



<?php get_footer(); ?>

  • Search the property Breaking-Inside: avoid, if I’m not mistaken eh this, it prevents this breaking of an element in two different columns

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.