Adaptive layout. Is it right?

Question

Adaptive layout. Is it right?

The layout is not particularly good, but want to understand.
I have below table with the picture inside the div on all monitors displayed the same way I do?

<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="height: 603px;">
 <div class="info-box info-box2">
 <div class="img">
 <img src="images/uploads/test/arrow.png" style="width: 70%;">
</div>
 </div><!-- /.info-box -->
</div>

Is there any must-read guide on this topic? Useful lessons can be.

Trever_Padberg asked July 8th 19 at 15:26

Related questions

More answers about "Adaptive layout. Is it right?"

3 answers

Miller_Predovic answered on July 8th 19 at 15:32

This is not correct:
style="height: 603px;"

Define the class and ask the height in it.
For images specifies the width in atribute, not inline style.

"Pictures tell the width in atribute, not inline style." style="width: 70%;"> about it? Ie is better in style.css to reflect that, of course.
But it worries me in the first place: class="col-lg-1 col-md-1 col-sm-1 col-xs-1" . That's right I did? - Trever_Padberg commented on July 8th 19 at 15:35

Gussie_Hansen answered on · Accepted Answer · 2019-07-08T15:28:02.601Z

Gussie_Hansen answered on July 8th 19 at 15:28

Solution

Click here explains and shows

webformyself.com/minikurs/bootstrap/index-subscrib...

Nels.Gorczany answered on · Accepted Answer · 2019-07-08T15:30:02.601Z

col-lg-1 col-md-1 col-sm-1 col-xs-1 this is initially wrong, the record does not make sense, the bootstrap works in such a way that if you asked for example

<div classs="col-sm-3">
</div>

all that above (ie, md, and lg) will be col-md-3 and col-lg-3
and anything below (xs) will be col-xs-12
that is, just specify col-xs-1 and all, but it does not make much sense as say on the phone with width 320px display will be divided into 12 parts and consider that it will be difficult, you can try for example

<div class="col-md-4 col-sm-3 col-xs-6">
content
</div>

if the picture is inside the block then give it a class and assign values

width:100%;
height:auto;

and it will scale under the block without losing proportions