Div and Responsive Content

Question

Div and Responsive Content

Navigation

#1 by (1 votes)

1

Requirement

Create a responsive div, that is, change the size of the content but the location is exactly the same, in my case, that changes the size of the bus and at the same time the size of the heads, maintaining the location.

In this case the heads change size but the bus does not.

Is it possible? , I'm using bootstrap 3.

(Regardless of 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>

html5 html css3 bootstrap

asked by nawelittle 01.03.2018 в 14:19

source

1 answer

What this error is in PHP with SQL Server Select query in database firebase Android

score 1 · Accepted Answer

Hello, everything can be jejeje, but bootstrap was not designed for it, it plays with css and its logic of life-long layout, but we go by steps.

All measurements must be in percentages so that everything is functional.

I advise you that all the heads have a common class, so as not to be repeating the code in each one.

The bus is not responsive, not because the styles you put in are wrong, but because your class BUS is in capital letters and in the css, in lowercase .bus

The other is already optional:

I recommend using .svg files so that the images do not pixelate.

Group the images ( img ) in figure tags, it's a good practice.

For the DNI is the same as with the heads , but it depends on your design, look how I propose:

Add a span with the contents of the DNI and with the same class humanX of the image that you will associate and add another common class such as: dni .
In the css, you adapt it to the height you need and with a font and size you need, to make them responsive I recommend using measures vmin or vmax , % or calc .
Use display:inline-block in span , so you can accept other attributes you need, for example transform or width .
As the space in small sizes does not reach 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% humanX of the image you are going to associate, this number will automatically be put in the same position.

See an example with your 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%;
}
.cabeza{
  position: absolute; 
  width:4%; 
  top: 37.5%;
}

.human1 { left: 23%; }

.human2 { left: 29%; }

.human3 { left: 35%; }

.human4 { left: 67%; }

.dni{
 position: absolute;
 display: inline-block;
 background: lightgray;
 top: 30%;
 font-size: calc(0.5em + 10%);
 transform-origin: 0 0;
 transform: rotateZ(-90deg);
}

<div class="parent">

  <img class="bus" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX10405102.jpg" />
  <img class="cabeza human1" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
  
    <img class="cabeza human2" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
    <span class="dni human2">1516546514</span>
      <img class="cabeza human3" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
    <span class="dni human3">4578714</span>
        <img class="cabeza human4" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
        
  
  
  
</div>

Why did I mention the figure? because you can take advantage of this structure:

<figure class="cabeza humanX">
  <img class="cabeza" src="cabeza-svg">
  <figcaption="dni"> 1213545646 </figcaption>
</figure>

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