How to make responsive HTML buttons and position them together on small resolutions

user_11854094 0
Viewed 81

In my website in the same <div>, I have a <span> with three buttons. This is how it looks like in front-end:

This is my HTML:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding" style="padding-bottom:15px;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
        <span id="horaPantalla"></span>
        <i class="fa fa-cogs imgButton" aria-hidden="true"></i>
        <i class="fa fa-camera imgButton" aria-hidden="true" id="configScan"></i>
        <i class="fa fa-sign-out imgButton" aria-hidden="true""></i>
     </div> 
</div>

If I access from my mobile phone I got this:

enter image description here

Two buttons are on the first line and then the other button is on the second line.

My goal is to fit all three buttons together, if the resolution is small I want to put all three buttons in a new row below the <span>.

I have tried the below by adding a class called resolution to the <i> elements:


.imgButton {
    font-size: 36px !important;
    /*padding: 2px;*/
    padding-bottom: 2px;
    cursor:pointer;
    background-color:#A3D1D4 !important;
    border:none !important;
}

@media screen and (max-width: 900px) {
  .resolution {
    float: none;
    width: 100%;
  }
}

This is what I get:

enter image description here

How can I put three <i> elements inline below the <span> on mobile devices?

responsive css html
2 Answers

You can wrap the icons in a container div and make both the #hourPantella span and the container div display: inline-block.

For example:

.icon {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  
  display: inline-block;
}

.date, .icon-container {
  display: inline-block;
}
<div class="date">Date - Time</div>
<div class="icon-container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>

And a JSFiddle example: https://jsfiddle.net/5a8o7ykd/.

Note that this example is not exactly like what you showed. I just used placeholder divs instead of actual icons and I didn't actually put a date into the span. You should be able to adapt it to work with your code though.

user_47139520

Check if this is what you want?

@media (max-width: 900px) { 
  .block {
    display: block;
  }
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
    <span id="horaPantalla" class="block">Hour</span>
    <i class="fa fa-cogs imgButton" aria-hidden="true"></i>
    <i class="fa fa-camera imgButton" aria-hidden="true" id="configScan"></i>
</div>

user_80981730
Related