gelöst Pfeile in Bilderübersicht versetzten

Thema wurde von claudiaangerer, 14. Juli 2023 erstellt.

  1. claudiaangerer

    claudiaangerer Erfahrener Benutzer

    Registriert seit:
    30. Juni 2011
    Beiträge:
    74
    Danke erhalten:
    7
    Danke vergeben:
    33
    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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    #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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    hiermit sind sie weiß:

    Code:
    mfp-arrow {
        opacity: 1;
    }
     
  4. claudiaangerer

    claudiaangerer Erfahrener Benutzer

    Registriert seit:
    30. Juni 2011
    Beiträge:
    74
    Danke erhalten:
    7
    Danke vergeben:
    33
    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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    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:
    74
    Danke erhalten:
    7
    Danke vergeben:
    33
    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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    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:
    74
    Danke erhalten:
    7
    Danke vergeben:
    33
    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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254