foto niet over de hele breedte op mobiel

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Het gaat over deze pagina: https://met-rob.com/roseparquet/aa.html

Hier staat onder "PARKET" een foto.
Ik heb in de html code opgegeven dat de foto weergegeven moet worden op 100%: <p><span class="image left"><img src="images/afbeelding1.jpg" width="100%" alt="" /></span>

Maar er zit rechts meer witruimte dan links als ik hem bekijk op mijn telefoon. (zie bijlage)

Ik denk dat het komt door dit: <span class="image left"> margin: 0 2em 2em 0;

Maar dit zorgt ervoor dat op een gewone pc de tekst niet tegen de foto aanloopt.

Ik wil het op een gewone pc zo houden maar er wel voor zorgen dat de foto op een telefoon rechts net zoveel witruimte heeft dan links.

iemand een idee?
 

Bijlagen

  • 1653732569646.jpg
    1653732569646.jpg
    710,5 KB · Weergaven: 25
Onderaan in bestand "assets/css/main.css" zet je het volgende
Code: 
/* geen witruimte links/rechts bij linkser/rechter afbeelding op smartphone */
@media screen and (max-width: 736px) {
    .image.left, .image.right {
        margin-right: 0;
        margin-left: 0;
    }
}

Het is niet zinvol in de html bij <img ....> een width op te geven.
De width is vastgelegd in bestand "assets/css/main.css" en die heeft prioriteit boven de html
Code: 
.image.left,
.image.right {
    max-width: 100%;
}
.image.left img,
.image.right img {
    width: 100%;
}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan