Dominic Cobb Dominic Cobb - 4 years ago 128
CSS Question

how to move icon according to screen resolution in CSS

I am having problem solving this problem in css design. firstly I have this icon that sits right next to the text. like picture below.
enter image description here

but now when I try to minimize the screen then the smurfs icon would collide with the text like below.
enter image description here

now my question is how can I make the icon move away from the text so as not to collide with it when I decrease the browser screen resolution?

here is my css code.



.footer .icon-footer {
overflow: hidden;
position: absolute;
background-size: contain;
width: 100%;
left: 18%;
top: 25px;
}

.icon-footer .icon {
float: left;
width: 51px;
height: 51px;
position: relative;
background-size: 35px;
background-repeat: no-repeat;
background-image: url("images/icon.png");
margin-left: 4px;
padding-left: 20px;
}




any help would be appreciated though.

update.
this is part of my index.html code.



<div class="icon-footer">
<div class="icon"></div>
</div>
<div class="info">
<p>&copy; 2017 McDonald&#039;s<sup>&reg;</sup></p>
<p>Smurfs™ & © Peyo 2017 Lic. Lafig Belgium. Smurfs: The Lost Village, the Movie</p>
<p>© 2017 Columbia Pictures Industries, Inc. and LSC Film Corporation. All Rights Reserved.</p>
</div>





the full index.html code can be found here https://jsfiddle.net/arg0L09m/1/
and for the CSS can be found here. https://jsfiddle.net/2q1catmt/

Answer Source

One way to do it in a reliable way would be to put both the logo and the text content wrapped inside a single container without using any kind of absolute positioning, or using absolute positioning only on the container.

This below is just a basic example; some adjustments would be needed; click on "run snippet", then "full page" in order to better test how it behaves on different page widths.

.footer .icon-footer {
  overflow: hidden;
  position: absolute;
  background-size: contain;
  width: 100%;
  left: 18%;
  top: 25px;
}

.icon-footer .icon {
  float: left;
  width: 51px;
  height: 51px;
  position: relative;
  background-size: 35px;
  background-repeat: no-repeat;
  background-image: url("http://findicons.com/files/icons/638/magic_people/96/magic_ball.png");
  margin-left: 4px;
  padding-left: 20px;
}
<div class="footer">

  <div class="icon-footer">
    <div class="icon"></div>
    <div class="content">
      Bacon ipsum dolor amet fatback pork shoulder ball tip, jerky boudin t-bone biltong pastrami frankfurter meatball hamburger. Cow kielbasa fatback short loin tail. Ham hock shankle biltong salami, hamburger turducken sirloin. Flank ball tip leberkas drumstick pancetta meatloaf burgdoggen rump short loin kevin picanha ham hock venison hamburger tri-tip. Fatback jerky shoulder pork t-bone boudin bresaola tail hamburger meatloaf capicola.
    </div>
  </div>
  
</div>
  

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download