Vincenzo Vincenzo - 1 month ago 6
HTML Question

Confused about using SPAN vs DIV and natural flow

I have been trying to create a blinking LED with a caption (the relative position between the LED and the caption should be kept at all times) ... I would like the LEDs to be aligned next to each other when the page is wide enough, and to become stacked when the page shrinks (i.e., the LEDs should be responsive).

I am happy with the relative positioning and with the behavior when the page is maximized, but I don't manage to implement the responsive behavior ... I have tried playing around with DIVs, SPANs, inline-block and floating ...

I guess I am confused as to how they interact with each other.

Any suggestions on how to approach/solve this issue?

The CSS is here:

.led {
height: 20px;
width: 20px;
border: 2px solid black;
border-radius: 20px;
margin: 40px 60px 20px 60px;
background: #f2ffe6;
position: relative;
}

.led_caption {
width: 700%;
text-align: center;
position: absolute;
display: inline-block;
top: 30px;
left: -300%;
}


The HTML is here:

<div style=" width: 500px; height: 100px; margin: 0 auto; ">
<div class="led" style="display:inline-block">
<span class="led_caption"> Caption </span>
</div>
<div class="led" style="display:inline-block">
<span class="led_caption"> Caption </span>
</div>
<div class="led" style="display:inline-block">
<span class="led_caption"> Caption </span>
</div>
</div>


And the Codepen link is here: http://codepen.io/vpappano/pen/WGYpzm

Answer

To accomplish this you will want to use media queries.

CSS:

.led {
   height: 20px;
   width: 20px;
   border: 2px solid black;
   border-radius: 20px;
   margin: 40px 60px 20px 60px;
   background: #f2ffe6;
   position: relative;
   display: inline-block;
}

@media (max-width: 400px) {
   .led {
     display: block; 
   }
}

.led_caption {
    width: 700%;
    text-align: center;
    position: absolute;
    display: inline-block;
    top: 30px;
    left: -300%;    
}

HTML:

<div style=" width: 500px; height: 100px; margin: 0 auto; ">
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
    <div class="led">
        <span class="led_caption"> Caption </span>
    </div>
</div>
Comments