Twee verschillende afbeeldingen op website en mobiele site

  • dannyvdb1997

    (@dannyvdb1997)


    8 jaren, 8 maanden geleden

    Beste,

    Het klinkt als een stomme vraag. Ik wil op mijn site een leaderboard van 728px breed plaatsen. Op mijn mobiele site moet echter op dezelfde plaats een 250×250 banner terecht komen. Deze moet de 728 leaderboard dus vervangen. Nu heb ik heel internet al afgestruind en verschillende tutorials tegengekomen, maar ik kom er niet uit.

    Ik heb onder andere deze code gebruikt:

    <img src="image.jpg"
    data-src-960px="image-960px.jpg"
    data-src-1260px="image-1260px.jpg"
    alt="">

    En dit in de CSS gezet:

    @media (min-device-width:320px) {
    img[data-src-960px] {
    content: attr(data-src-960px, url);
    }
    }

    @media (min-device-width:960px) {
    img[data-src-1260px] {
    content: attr(data-src-1260px, url);
    }
    }

    Ik krijg de afbeelding dan wel te zien, maar op mobiel zie ik niet de 250×250 banner.

    Heeft er iemand tips?

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Arjen_M

    (@arjen_m)

    8 jaren, 8 maanden geleden

    Je geeft nu 2x een minimale device width.
    die 2de, van 960px word niet behandeld.
    probeer eens iets als :

    @media only screen
  and (min-device-width: 320px)
  and (max-device-width: 736px)  {
//plaats je css dan hier.
}

    Daarna kan je 

    @media only screen
  and (min-device-width: 960px)
  and (max-device-width: 1024px)  {
// CSS hier.
}
    Thread starter dannyvdb1997

    (@dannyvdb1997)

    8 jaren, 8 maanden geleden

    Aha, oke. Als ik dit plaats in mijn CSS file, hoe geef ik dit dan juist aan in het bericht? Ik wil dan op mijn normale site de 728 brede leaderboard aangeven. Op mobiele site 250×250. Kan dit dan met bovengenoemde code?

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘Twee verschillende afbeeldingen op website en mobiele site’ is gesloten voor nieuwe reacties.