gelöst Pfeile in Bilderübersicht versetzten

Dieses Thema im Forum "HTML & CSS" wurde erstellt von claudiaangerer, 14. Juli 2023.

  1. claudiaangerer
    claudiaangerer Erfahrener Benutzer
    Registriert seit:
    30. Juni 2011
    Beiträge:
    87
    Zustimmungen:
    13
    Gegebene Danke:
    41
    Hallöchen.
    Kann mir jemand helfen die beiden Pfeile links und rechts im Artikel - Bilderübersicht, mehr zur Mitte (zum Bild hin) zu versetzen. Denn wenn man nicht exakt den Pfeil trifft, öffnet sich dieses rechte Seitenmenü und das ist sehr störend. Es stört nur bei Desktop, Mobile nicht. Auch sollten die Pfeile Weiß sein und etwas größer (Desktop).

    Von Wilken hab ich folgenden CSS Code dafür bekommen:

    /* Bilder-Pfeile Abstand*/
    .mfp-arrow.mfp-arrow-left {
    margin-left: 60px;
    }
    .mfp-arrow.mfp-arrow-right {
    margin-right: 60px;
    }

    Desktop passt es nun, nur leider rutschen die Pfeile Mobile so weit nach innen, dass man die Pfeile nicht mehr gut sieht. Wie kann ich das lösen? lg claudia
     

    Anhänge:

  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.927
    Zustimmungen:
    1.486
    Gegebene Danke:
    574
    #2 Anonymous, 14. Juli 2023
    Zuletzt bearbeitet: 14. Juli 2023
    So wie ich es auf die schnelle gesehen habe, passen die Pfeile bis zu einer Bildschirmbreite von 730px.
    Mit diesem Code gelten die margin: 60px erst ab einer Bildschirmbreite von 730px und größer.
    Teste es einfach mal:

    Code:
    @media (min-width: 730px){
    .mfp-arrow.mfp-arrow-left {
    margin-left: 60px;
    }}
    
    @media (min-width: 730px){
    .mfp-arrow.mfp-arrow-right {
    margin-right: 60px;
    }}
     
  3. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.927
    Zustimmungen:
    1.486
    Gegebene Danke:
    574
    hiermit sind sie weiß:

    Code:
    mfp-arrow {
        opacity: 1;
    }
     
  4. claudiaangerer
    claudiaangerer Erfahrener Benutzer
    Registriert seit:
    30. Juni 2011
    Beiträge:
    87
    Zustimmungen:
    13
    Gegebene Danke:
    41
    Super, Danke Michaela. Nur wo trage ich das ein, wenn ich die Pfeile nur Desktop weiß haben möchte, denn Mobile sind sie schon weiß. direkt nach dem oberen Code?
     
  5. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.927
    Zustimmungen:
    1.486
    Gegebene Danke:
    574
    ja, wenn du es nicht am Handy möchtest, dann trägst das

    opacity: 1;

    in die ersten 2 Codes ein.
     
  6. claudiaangerer
    claudiaangerer Erfahrener Benutzer
    Registriert seit:
    30. Juni 2011
    Beiträge:
    87
    Zustimmungen:
    13
    Gegebene Danke:
    41
    Super, das hat geklappt. Nur der rechte Pfeil mag sich (Desktop) nicht versetzten lassen. Mobile schaut´s gut aus:)
     

    Anhänge:

  7. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.927
    Zustimmungen:
    1.486
    Gegebene Danke:
    574
    ah, sorry, beim rechten Pfeil muss natürlich margin-right stehen. :)
    habs in #2 abgeändert.
     
  8. claudiaangerer
    claudiaangerer Erfahrener Benutzer
    Registriert seit:
    30. Juni 2011
    Beiträge:
    87
    Zustimmungen:
    13
    Gegebene Danke:
    41
    JAAAA genau. Das war´s. Nun passt es perfekt.

    Vielen lieben Dank Michaela für deine Hilfe:)
     
  9. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.927
    Zustimmungen:
    1.486
    Gegebene Danke:
    574