Request
Create a responsive div, that is, change the size of the content but the location is exactly the same, in my case, change the size of the bus and at the same time that of the heads, maintaining the location.
In this case the heads change size but the bus does not.
It's possible? I am using bootstrap 3.
(Aside from the main question) Is it possible to add the DNI on each head and make it Responsive?
Code
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
.parent {
position: relative;
top: 0;
left: 0;
width: 90%;
}
.bus {
position: relative;
top: 0px;
left: 0px;
width:100%;
}
.human1 {
position: absolute;
top: 42%;
left: 364px;
width:4%;
}
.human2 {
position: absolute;
top: 42%;
left: 458px;
width:4%;
}
.human3 {
position: absolute;
top: 42%;
left: 264px;
width:4%;
}
.human4{
position: absolute;
top: 42%;
left: 164px;
width:4%;
}
<div class="parent">
<img class="bus" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX10405102.jpg" />
<img class="human1" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
<img class="human2" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
<img class="human3" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
<img class="human4" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
</div>
Hello, everything is possible lol, but bootstrap was not designed for it, it touches with css and its usual layout logic, but we go by steps.
BUS
is in uppercase and in the css, in lowercase.bus
The other is already optional:
img
) in figure tags, it is a good practice.For the DNI it is the same as with the heads , but it depends on your design, see how I propose it:
Add a
span
with the content of the DNI and with the same classhumanX
of the image that you are going to associate and add another class in common, such as:dni
.In the css, you adjust it to the height you need and with a font and size you need, to make them responsive I recommend using measurements
vmin
orvmax
,%
orcalc
.Use
display:inline-block
in thespan
, so that it can accept other attributes you need, for exampletransform
orwidth
.As the space in small sizes is not enough if the number is large, I recommend you rotate it vertically, that way it is readable to a certain extent.
If you use the same class
humanX
as the image you are going to associate, this number will automatically be put in the same position.Look at an example with your code:
Why did I mention the figure to you? because you can take advantage of this structure:
And thus be able to perfectly align each DNI to each head, without having to worry about its position with respect to the entire bus.
If you have any questions, leave me your comment. successes!
@EdgarGutierrez @G3kdigital