Html Css and Php Dynamic content in DIV

Question

Html Css and Php Dynamic content in DIV

Navigation

#1 by (1 votes)

1

I am developing a website and in it I created a service area where through CSS, HTML, PHP and Laravel I display the content dynamically, I make a foreach ...

As I do not limit how many records the user can include, he can include as many as he wants, which gives me a Layout problem when he does not include 3 in 3, see the image ...

Asyoucansee,thereareonly4recordsregistered,thelastonebeingatthebottomofthescreen,whichendedupgeneratingablankspaceontheright.

SoIask:HowdoIadjust?isthereanywaytogetjavascriptthesizeofthewhitespacesothatIcanhelpBoxviaCSS?

HTML/BladeCode

<sectionclass="servicos">
        <div class="container"> 
            <div class="row text-center">
                    <h2><i class="fa fa-briefcase" aria-hidden="true"></i> &nbsp;S e r v i c o s </h2>
                    <hr>
             </div> 
        </div>

            <div class="col-xs-12">
                <div class="container">                     
                  @forelse($servicos as $dados_servicos)
                    <div class="col-xs-4">                                
                            <div class="box col-xs-12">                     
                                  <div class="icone text-center">    
                                      <i class="fa {{$dados_servicos->caminhoicone}} fa-4x" aria-hidden="true"></i>  
                                  </div>                                     
                                 <h3 class="text-center titulo">{{$dados_servicos->titulo}} </h3>
                                 <p class="texto">{!!$dados_servicos->post!!}  </p>                                     
                            </div>                                              
                    </div>
                    @empty
                    Nenhum Serviço Cadastrado
                    @endforelse            
                </div>
           </div>

        </section>

CSS

.servicos .box{

    border-radius: 3%;
    text-align: center;  
    margin-left: 6%;
    margin-top: 10px;
    width: 300px;
    height: 300px;
    background-color:#a09f9d;
    font-family: "Roboto-Light";
    float: left;
    /*background-color: rgba(255, 255, 255, .4);*/
    cursor: pointer;


}

.servicos .box:hover{  
    box-shadow: 15px 15px 15px 15px rgba(0, 0, 0, 0.3);
    transition: all 1.0s ease;
}



.servicos .box .icone{
    margin-top: 10px;
    color: white;

}

.servicos .box .titulo{

    color:white;
    font-family: "Roboto-Light";
    overflow: hidden;
    font-weight: bold;

}


.servicos .box .texto{
    position: relative;
    font-family: "Roboto-Light";
    color: white;   
    margin-top: 10px;
    overflow: hidden;

}

javascript html css

asked by anonymous 21.02.2018 / 20:24

1 answer

How to load Image from FileUpload to asp: Image tag? Error installing psycopg2 in a virtualenv environment with pypy

score 1 · Accepted Answer

Young follows an answer that may help you. You'll have to mix the Bootstrap Grid with Flex-box.

I did not do much in CSS and HTML, but I needed to do something ... Just take a look because I left things commented in CSS

With this, I only try 1 or 2 items on the bottom line, they will always be in the middle of the page. Pay attention to these classes, because they make the "magic" happen.

.holder {
        /* essas são as classes de alinhamento dos boxes dentro do container */
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 970px; /* aqui vc define a largura máxima, no caso fiz para caber apenas 3 boxes, e conforme for diminuindo a tela vai ficar 2 por linha e finalmente 1 por linha. */
}

See the Running Example below! Display all page to better see the resposivity.

* {
            box-sizing: border-box;
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .col-box {
            box-sizing: border-box;
            padding: 10px 2px; /* aqui é o tamanho da borda entre um box e outro, depende vc vai ter que fazer ajustes finos para te atender melhor */
        }
        .holder {
            /* essas são as classes de alinhamento dos boxes dentro do container */
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 970px; /* aqui vc define a largura máxima, no caso fiz para caber apenas 3 boxes, e conforme for diminuindo a tela vai ficar 2 por linha e finalmente 1 por linha. */
        }
        
        .servicos .box{
        border-radius: 3%;
        text-align: center;  
        width: 300px;
        height: 300px;
        background-color:#a09f9d;
        font-family: "Roboto-Light";
        /*background-color: rgba(255, 255, 255, .4);*/
        cursor: pointer;
        }
        .servicos .box:hover{  
        box-shadow: 15px 15px 15px 15px rgba(0, 0, 0, 0.3);
        transition: all 1.0s ease;
        }
        .servicos .box .icone{
        margin-top: 10px;
        color: white;
        }
        .servicos .box .titulo{
        color:white;
        font-family: "Roboto-Light";
        overflow: hidden;
        font-weight: bold;
        }
        .servicos .box .texto{
        position: relative;
        font-family: "Roboto-Light";
        color: white;   
        margin-top: 10px;
        overflow: hidden;
        }

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<section class="servicos">
            <div class="container">
                <div class="row text-center">
                    <h2>
                        <i class="fa fa-briefcase" aria-hidden="true"></i> &nbsp;S e r v i c o s </h2>
                    <hr>
                </div>
            </div>
        
            <div class="col-xs-12">
                @forelse($servicos as $dados_servicos)
        
                <div class="container holder">
        
                    <div class="col-box">
                        <div class="box">
                            <div class="icone text-center">
                                <i class="fa {{$dados_servicos->caminhoicone}} fa-4x" aria-hidden="true"></i>
                            </div>
                            <h3 class="text-center titulo">{{$dados_servicos->titulo}} </h3>
                            <p class="texto">{!!$dados_servicos->post!!} </p>
                        </div>
                    </div>
                    <div class="col-box">
                        <div class="box">
                            <div class="icone text-center">
                                <i class="fa {{$dados_servicos->caminhoicone}} fa-4x" aria-hidden="true"></i>
                            </div>
                            <h3 class="text-center titulo">{{$dados_servicos->titulo}} </h3>
                            <p class="texto">{!!$dados_servicos->post!!} </p>
                        </div>
                    </div>
                    <div class="col-box">
                        <div class="box">
                            <div class="icone text-center">
                                <i class="fa {{$dados_servicos->caminhoicone}} fa-4x" aria-hidden="true"></i>
                            </div>
                            <h3 class="text-center titulo">{{$dados_servicos->titulo}} </h3>
                            <p class="texto">{!!$dados_servicos->post!!} </p>
                        </div>
                    </div>
                    <div class="col-box">
                        <div class="box">
                            <div class="icone text-center">
                                <i class="fa {{$dados_servicos->caminhoicone}} fa-4x" aria-hidden="true"></i>
                            </div>
                            <h3 class="text-center titulo">{{$dados_servicos->titulo}} </h3>
                            <p class="texto">{!!$dados_servicos->post!!} </p>
                        </div>
                    </div>
                    <div class="col-box">
                        <div class="box">
                            <div class="icone text-center">
                                <i class="fa {{$dados_servicos->caminhoicone}} fa-4x" aria-hidden="true"></i>
                            </div>
                            <h3 class="text-center titulo">{{$dados_servicos->titulo}} </h3>
                            <p class="texto">{!!$dados_servicos->post!!} </p>
                        </div>
                    </div>
        
        
                    <!-- @empty Nenhum Serviço Cadastrado @endforelse -->
                </div>
            </div>
        
        </section>