how to do a responsive div?

Question

how to do a responsive div?

Navigation

#1 by (3 votes)

1

I have several div like these in my page that when doing hover on a map they will float in that position that I wish them, but I have a problem and that is when the resolution changes the page is responsive but the divs do not and they stay the div of the same size and in the same position and I do not know how to make them adapt to the size of the page and they are enlarged or shrunk depending on the resolution and they are positioned again in the right place, since when shrinking or enlarging the mapping changes already which is responsive but they do not

.bubble {
        background-color: #00CCCC;
        background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
        background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
        background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
        background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
        background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
        border-radius: 5px;
        box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
        3px 3px 0 hsla(0,0%,0%,.1);
        color: #006699;
        display: block;
        font: 16px/25px sans-serif;
        padding: 15px 25px;
        position: absolute;
        text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
        box-sizing: border-box;
        word-wrap: break-word;
        }
      .bubble:after, .bubble:before {
        border-bottom: 25px solid transparent;
        border-right: 25px solid #00CCCC;
        bottom: -25px;
        content: '';
        position: absolute;
        right: 25px;
        }
      .bubble:before {
          border-right: 25px solid hsla(0,0%,0%,.1);
          bottom: -28px;
          right: 22px;
          }
     @media only screen and (min-width : 320px) and (max-width : 480px) {
/* Styles */
#Target{
  top: 5% ;
  left: 20%;
}

<div id="Target" class="bubble" style="top: 27%; left: 23.2%;" >Hola chicos</div>
<div id="Cliente" class="bubble" style="top: 35%; left: 10.4%;" >Que tal?</div>
    <div id="SegP" class="bubble" style="top: 48%; left: 4.4%;" >:(</div>

html5 html css3 css

asked by psy 17.05.2018 в 15:38

source

1 answer

Debug-Log from a distance? Android Studio Group consecutive duplicates in python

score 3 · Accepted Answer

You can do everything smaller for maximum resolutions. Starting with 768px which is the measure of the tablets and then you can go by 480px which are cell phones.

In the following link I leave you what you have done but with changes to take the responsive, what I did was to reduce the measures that you had initially and to put a min-width to the container so that it does not break in case of having few characters, more than anything for :( that looked bad.

@media only screen and (max-width: 768px) {
  .bubble {
    padding: 5px 7px;
    min-width: 30px;
  }
  .bubble:after,
  .bubble:before {
    border-bottom-width: 12.5px;
    border-right-width: 12.5px;
    bottom: -12.5px;
    right: 12.5px;
  }
  .bubble:before {
    border-right-width: 12.5px;
    bottom: -14px;
    right: 11px;
  }
}

For the positioning of the <div> with respect to the responsive you can use the window.addEventListener("resize", miFuncionResize) captured the event, calculate the new position and change the positions of the <div> .