Viewport / Image

Limbaje de Programare HTML & CSS
1

Cum as putea face alinierea elementelor in functie de rezolutie? Se vede bine pe rezolutia mea dar daca micsorez browser-ul se face varza, asa va fi si pe telefon cand accesez site-ul banuiesc. Mi-ar prinde bine si cateva sfaturi pentru viitor, sunt incepator momentan, apreciez.
Am in HEAD: <meta name="viewport" content="width=device-width, initial-scale=1">

Untitled
Untitled.png331×531 230 KB 

<div class="content">
      <h1 style="color:white;font-size:21px;"><u>DISTRACTIA ESTE LA EA ACASA!</u></h1>
        
      <img class="zoom" src="images/a1.jpg" onclick="myFunction(this);">
      <img class="zoom" src="images/a2.jpg" onclick="myFunction(this);">
      <img class="zoom" src="images/a3.jpg" onclick="myFunction(this);">
      <img class="zoom" src="images/a4.jpg" onclick="myFunction(this);">
      <img class="zoom" src="images/a5.jpg" onclick="myFunction(this);">
      <img class="zoom" src="images/a6.jpg" onclick="myFunction(this);">
      <img class="zoom" src="images/a7.jpg" onclick="myFunction(this);">
      
      <img src="images/car1.png" alt="" style="height:350px;position: absolute;left:100px;top:520px;">
      <div class="ld" style="font-size:12px;color:white;position: absolute;right:50px;transform: rotate(-20deg);top:520px;">NIMENI NU NE OPRESTE</br>HAIDE SI TU CU NOI</br></br></br></br>UITA DE PLICTISEALA</br><font style="color:orange;">TEST</font> SINONIM CU <font style="color:red">DISTRACTIE</font></div>
      <img id="expandedImg" src="images/a1.jpg" style="max-width:100%;max-height:100%;width: auto;height: auto;height:400px;border-radius:5%;">
  </div>

STYLE:
div.content
{
    width: 100%;
    text-align: center;
}
1 Like
2

Ori nu mai poziționezi elementele absolut ori folosești procente în loc de px.

1 Like
3

Ai putea să combini media queries cu flex.

De ex:


<div class="wrapper">
    <span>text</span>
    <span>text</span>
    <span>text</span>
</div>

<style>
.wrapper{
display: flex;
flex-direction: row;
}
@media only screen and (max-width: 600px) {
  .wrapper{
    flex-direction: column;
  }
}
</style>

Nu am testat codul, scriu de pe telefon, dar cam așa ar trebui să fie.
Ce face e să alinieze în coloană elementele când ecranul e mai îngust de 600px.

1 Like