How can I effectively move divs with half queries?

Question

How can I effectively move divs with half queries?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Eh been trying to put two divs that are always the same size one winged another by row but when it is smaller the screen that is placed one below another. There must be a better way but I can not do it effectively

I'm imagining something like this:

This is the CSS code that I have:

 .modal_scroll {
    max-height: 500px;
    overflow-y: auto;
}

.modal_wrap{
    margin-top: 10px;
    display: inline-block;
}

.modal_square{
    padding-right: 5px;
    padding-left: 5px;
    height: 100%;
    width: 50%;
    float: left;
    overflow: hidden;
}

.modal_img{
    margin-right: 5px;
    display: block;
    float: left;
}

.modal_description{
    display:block;
}

@media screen and (max-width: 600px) {
    .modal_square { 
     border-top: 2px solid #cacaca;
     float: none;
     margin-right:0;
     width:auto; 
   }
 }

 @media screen and (max-height: 500px) {
    .modal_scroll {
        max-height: 300px;
        overflow-y: scroll;
    }
 }

And this is my structure in HTML:

    <div class="modal_scroll">
    <div class="cartTableHeader" colspan="4" style="background-color: #EBEDEF">
        <h4 class="margin-top-10" >Agregar Productos</h4>
    </div>
    <div class="modal_wrap">
        {% for publication_product in publication_products_to_add %}
        <div class="modal_square">
            <div class="modal_img">
                <a href="{% url "get_store_publication" publication_product.publication.id publication_product.publication.slug %}" target="_blank">
                <img src="{{ publication_product.images.0.url_115x115 }}" alt="{{ publication_product.name }}">
                </a>
            </div>
            <div class="CartDescription col-xs-7 info_set">
                <h4>
                    <a href="{% url "get_store_publication" publication_product.publication.id publication_product.publication.slug %}" target="_blank">
                    {{ publication_product.name }}
                    </a>
                </h4>
                <span class="size">
                <span class="text_content_ss">Subtitle</span>
                <br>
                <span class="text_content_ss">Description</span>
                <br>
                <span class="text_content_ss">$00.00</span>
                <br>
                <span style="color:red;" class="text_content_ss">Alert: You need to add this</span>
                <br>
                </span>
            </div>
        </div>
    {% endfor %}

html responsive div mediaqueries

asked by Rafael 19.07.2018 в 17:28

source

2 answers

Why do you throw the following error when clicking on the table of my jFrame? How can I simulate pressing a button inside a WebView in Android Studio?

score 0 · Answer 1

It is better not to use float for these things because it will break the flow of the document and then you will have to restore it among other problems. Better with flex, for example:

.container {
display:flex;
width:100%;
}
.bloque{
flex:1;
margin:1%;
height:5em;
background:red;
}
@media screen and (max-width: 600px) {
   .container { 
   flex-direction:column;
   }
 
 }

<div class="container">
<div class="bloque"></div>
<div class="bloque"></div>
</div>

Or with inline-block if you do not want to use flex. In this case it is better that there are no spaces in the code between the two div .bloque for an inline-block limitation that will prevent you from being "stuck", although if you are going to leave some margin between them there is no problem:

   .container {
width:100%;
   text-align:center;
}
.bloque{
width:49%;
margin:0 0.5%;
height:5em;
background:red;
  display:inline-block;
}
@media screen and (max-width: 600px) {
   .bloque{
   width:100%;
   margin:1% 0;
   }
 }

<div class="container">
<div class="bloque"></div><div class="bloque"></div>
</div>

score 0 · Answer 2

check that you have the meta viewport in the head, and you could use flexbox in your code I hope I have been helpful, regards

'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">'