Keep images online even on mobile devices

Asked

Viewed 42 times

1

I have a div which contains some icons, which are aligned horizontally, but according to the size of the screen on which it is displayed a line break is generated, my goal is to prevent this from happening. even if icons are resized. 

#share-buttons img {
    width: 75px;
    height: 75px;
    padding: 8px;
    border: 0;
    box-shadow: 0;
    display: inline;
    }
<!-- I got these buttons from simplesharebuttons.com -->
<div id="share-buttons">
    <!-- Email -->
    <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://cncharitas.org.br/">
        <img src="https://i0.wp.com/simplesharebuttons.com/images/somacro/email.png?w=840&amp;ssl=1" alt="Email" width="59" height="59">
    </a>
    
    <!-- Facebook -->
    <a href="https://www.facebook.com/clubenavalcharitas/" target="_blank">
        <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/facebook.png?w=840&amp;ssl=1" alt="Facebook" width="59" height="59">
    </a>
    
    <!-- Google+ -->
    <a href="https://plus.google.com/+ClubeNavalCharitasNiter%C3%B3i" target="_blank">
        <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/google.png?w=840&amp;ssl=1" alt="Google" width="59" height="59">
    </a>        
    <!-- WhasApp-->
    <a href="http://api.whatsapp.com/send?1=pt_BR&amp;phone=5521971293327&amp;text=entre%20em%20contato%20conosco" target="_blank">
        <img src="https://i0.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/whasapp.png?w=840&amp;ssl=1" alt="WhatsApp" width="59" height="59">
    </a>
<!-- intagram-->
    <a href="https://www.instagram.com/cncharitas/" target="_blank">
        <img src="https://i1.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/intagram.png?w=840&amp;ssl=1" alt="instagram" width="59" height="59">
    </a>
</div>

When the screen is small I get this result.

inserir a descrição da imagem aqui

And I’d like something like: inserir a descrição da imagem aqui

Icons have been reduced to suit the screen in question. This is possible?

html css bootstrap-3 media-queries

3 answers

3


Remove fixed values and assign relative values.

#share-buttons {
  width: 100%;  
}

#share-buttons a {
  width: 18%;
  height: 100%;
  display: inline-block;
}

#share-buttons img {
  width: 100%;
  max-width: 75px;
  max-height: 75px;
  border: 0;
  box-shadow: 0;
}
<!-- I got these buttons from simplesharebuttons.com -->
<div style="width:500px;">
  <div id="share-buttons">
    <!-- Email -->
    <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://cncharitas.org.br/">
      <img src="https://i0.wp.com/simplesharebuttons.com/images/somacro/email.png?w=840&amp;ssl=1" alt="Email">
    </a>

    <!-- Facebook -->
    <a href="https://www.facebook.com/clubenavalcharitas/" target="_blank">
      <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/facebook.png?w=840&amp;ssl=1" alt="Facebook">
    </a>

    <!-- Google+ -->
    <a href="https://plus.google.com/+ClubeNavalCharitasNiter%C3%B3i" target="_blank">
      <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/google.png?w=840&amp;ssl=1" alt="Google">
    </a>
    <!-- WhasApp-->
    <a href="http://api.whatsapp.com/send?1=pt_BR&amp;phone=5521971293327&amp;text=entre%20em%20contato%20conosco" target="_blank">
      <img src="https://i0.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/whasapp.png?w=840&amp;ssl=1" alt="WhatsApp">
    </a>
    <!-- intagram-->
    <a href="https://www.instagram.com/cncharitas/" target="_blank">
      <img src="https://i1.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/intagram.png?w=840&amp;ssl=1" alt="instagram">
    </a>
  </div>
</div>
<br/>
<div style="width:250px;">
  <div id="share-buttons">
    <!-- Email -->
    <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://cncharitas.org.br/">
      <img src="https://i0.wp.com/simplesharebuttons.com/images/somacro/email.png?w=840&amp;ssl=1" alt="Email">
    </a>

    <!-- Facebook -->
    <a href="https://www.facebook.com/clubenavalcharitas/" target="_blank">
      <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/facebook.png?w=840&amp;ssl=1" alt="Facebook">
    </a>

    <!-- Google+ -->
    <a href="https://plus.google.com/+ClubeNavalCharitasNiter%C3%B3i" target="_blank">
      <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/google.png?w=840&amp;ssl=1" alt="Google">
    </a>
    <!-- WhasApp-->
    <a href="http://api.whatsapp.com/send?1=pt_BR&amp;phone=5521971293327&amp;text=entre%20em%20contato%20conosco" target="_blank">
      <img src="https://i0.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/whasapp.png?w=840&amp;ssl=1" alt="WhatsApp">
    </a>
    <!-- intagram-->
    <a href="https://www.instagram.com/cncharitas/" target="_blank">
      <img src="https://i1.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/intagram.png?w=840&amp;ssl=1" alt="instagram">
    </a>
  </div>
</div>

2

You should use some value take into account the width of the screen and not a fixed value, in this case I used the vw that considers the maximum value of the width of the screen (disregarded the size of the container), note that I put the same value both pro width pro height, also add style display: block; float: left;

html,body {
  margin: 0;
  padding: 0;
}
#share-buttons a {
  width: auto;
  height: auto;
}
#share-buttons img {
    width: 18vw;
    height: 18vw;
    padding: 1vw;
    margin: 0;
    border: none;
    box-shadow: 0;
    display: block;
    float: left;
}
<!-- I got these buttons from simplesharebuttons.com -->
<div id="share-buttons">
    <!-- Email -->
    <a href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://cncharitas.org.br/">
        <img src="https://i0.wp.com/simplesharebuttons.com/images/somacro/email.png?w=840&amp;ssl=1" alt="Email" width="59" height="59">
    </a>
    
    <!-- Facebook -->
    <a href="https://www.facebook.com/clubenavalcharitas/" target="_blank">
        <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/facebook.png?w=840&amp;ssl=1" alt="Facebook" width="59" height="59">
    </a>
    
    <!-- Google+ -->
    <a href="https://plus.google.com/+ClubeNavalCharitasNiter%C3%B3i" target="_blank">
        <img src="https://i1.wp.com/simplesharebuttons.com/images/somacro/google.png?w=840&amp;ssl=1" alt="Google" width="59" height="59">
    </a>        
    <!-- WhasApp-->
    <a href="http://api.whatsapp.com/send?1=pt_BR&amp;phone=5521971293327&amp;text=entre%20em%20contato%20conosco" target="_blank">
        <img src="https://i0.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/whasapp.png?w=840&amp;ssl=1" alt="WhatsApp" width="59" height="59">
    </a>
<!-- intagram-->
    <a href="https://www.instagram.com/cncharitas/" target="_blank">
        <img src="https://i1.wp.com/cncharitas.org.br/wp-content/uploads/2019/02/intagram.png?w=840&amp;ssl=1" alt="instagram" width="59" height="59">
    </a>
</div>

You can also use Fontawesome to create icons

html,body, #share-buttons {
    margin: 0;
    padding: 0;
    width: 100vw;
}
#share-buttons a {
    width: 16vw;
    height: 16vw;
    text-align: center;
    line-height: 16vw;
    margin: 2vw;
    padding: 0;
    font-size: 2.5rem;
    text-decoration: none;
    color: white;
    background-color: black;
    border-radius: 50%;
    display: block;
    float: left;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

<!-- I got these buttons from simplesharebuttons.com -->
<div id="share-buttons">
    <!-- Email -->
    <a class="fas fa-envelope" href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://cncharitas.org.br/"></a>
    
    <!-- Facebook -->
    <a class="fab fa-facebook-f" href="https://www.facebook.com/clubenavalcharitas/" target="_blank"></a>
    
    <!-- Google+ -->
    <a class="fab fa-google-plus-g" href="https://plus.google.com/+ClubeNavalCharitasNiter%C3%B3i" target="_blank"></a>

    <!-- WhasApp-->
    <a class="fab fa-whatsapp" href="http://api.whatsapp.com/send?1=pt_BR&amp;phone=5521971293327&amp;text=entre%20em%20contato%20conosco" target="_blank"></a>

    <!-- intagram-->
    <a class="fab fa-instagram" href="https://www.instagram.com/cncharitas/" target="_blank"></a>
</div>

  • A tip from... Watch out for the young vw, vw is not relative to the parent, it is relative to the screen, if the guy has a 42pol monitor this can get out of control and become extremely disproportionate to the other elements...

  • 1

    Yes @hugocsl, had already put in the answer that "the vw considering the maximum value of the width of the screen (disregarding the container size)", can decrease the size with media query

-4

try putting in css: max-width: 100%;

so it will resize the image according to the size of its parent element

  • Errata: "- so he will go limit the image according to the size of its parent element"

Browser other questions tagged html css bootstrap-3 media-queries

You are not signed in. Login or sign up in order to post.