Question 42807 in Html Question posted in
Some basic documentation can be found here.

Images are very small in mobile size – Html

I have a HTML page in the right size for desktop, with an aside TAG this the result for desktop size :
enter image description here

But when I test with F12 browser option for mobile , the images in the ASIDE tag
the images inside the ASIDE TAG are very small, i write a rule @media in the CSS but I’m making something wrong in the CSS Style??
This the HTML code :

  <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta charset="utf-8" />
 <title>Guia de Pesca Santos</title>
 <link href="css/style.css" rel="stylesheet " />
    <style>
                .img { height: 150px;width:150px;object- 
  fit:cover;float:left;
                    }
                .menu  { display:flex ;   align-items:center;  }
                section { display: flex; flex-direction: row ; } 
        

        main { height: 80vh; background-color: #999; }
        
        aside { height: 80vh; background-color: gold; width: 20%;
                display: flex; flex-wrap: wrap;}
        .icom img { align-items: center; width:70%; margin: 5px; display: 
       flex;  }

        @media (max-width:450px){

            aside {  background-color: green; width: 20px;  }
            .icom img { align-items: center;     margin: 5px;   }
            .logo { width:25%;    text-align:right; display:flex;}
        }

    </style>
  <meta name="viewport" content="width=device-width", initial-scale=1.0, 
  maxime-scale=1.0>
  </head>
  <body>
  <header>
  <nav>
   <div class="center">
       <div class="logo"><img src="img/logoDan.jpeg"  class="img"   /> 
 </div><!--Logo-->
     
            <div class="menu">
                <a href="Index2.html">Home</a>
                <a href="Embarcacoes.html">Embarcacoes</a>
                <a href="Agenda.html">Agenda</a>
                <a href="Galleria.html">Galeria</a>
                <a href="Contato.html">Contato</a>
            </div>
    </div>
</nav>
</header>
<section> 
<main>MAIN
<p>
   O Forno Combinado Digital Wictory é uma opção básica de custo-benefício 
para o seu estabelecimento, 
   composto pelas funções vapor, seco, combinado, 
</p>
</main>
            <aside>
<div class="icom">
                <a href="https://wa.me//5511950758677? 
 text=Ola!Voce_Gostaria_de_Pescar_com_a_gente" target="_blank">

                    <img src="img/whatsapp.png" width="100" hight="100" 
alt="Ligue no Nosso WhatsApp" title="Fale Conosco " />
                </a>
            
                <a 
 href="https://www.facebook.com/guiadepescaesportivasantos?mibextid=ZbWKwL" 
 target="_blank">

                    <img src="img/facebook.png" width="100" hight="100" 
alt="Facebook" title="Facebook" />
                </a>
                
                <a href="https://instagram.com/guiadepescasantos? 
 igshid=ZDdkNTZiNTM=" target="_blank">

                    <img src="img/instagram.png" width="100" hight="100" 
 alt="Instagram" title="Instagram" />
                </a>
 </div>
            </aside>
 </section>

 </body>
 </html>

enter image description here

As you can see in the image, the average property changes the background-color , but the main logo does not decrease and the images inside the ASIDE TAG are very small
Thanks by any help or orientation Alejandro

Tags:

3

Answers


  1. 0

    Maybe beacuse when on mobile your css code is this

    aside { width: 20px; }

    but when on pc your css code is this

    aside { width: 20%; }
    Login or Signup to reply.
  2. 0

    You can use relative units. Instead of using px try to use rem, em or %.
    Example:

    #css
aside { width: 4em }

    You can also use @media property for different widths of screens:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Login or Signup to reply.
  3. 0

    First of all, if you are using semantic tags, you should use them the way they are intended. You should use main for the main content of the body and then section with article, and aside for the content of the main tag. You can find more information about it here: W3Schools

    Also, I believe there is missing css as the header in the snippet doesn’t work, but as the problem is with the logos nevermind.
    The issue you have is because this:

    aside {  background-color: green; width: 20px;  }

    You assigned 20px to the size of the aside, so, once you are under 450px, the logos will be fixed at that size and thus very small. You can make it bigger (asigning more px or leaving it with percentage) or even placing it under the section, that’s up to you. If you want to have it on the same place, an option could be:

    aside {  background-color: green; width: 100px;  }

    You can find more information about length units here: MDN

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search