Wie entferne ich den Abstand um Widgets innerhalb von Rändern?
P粉187160883
P粉187160883 2023-09-07 12:54:25
0
1
632

Das erste Bild ist das, was ich habe, das zweite Bild ist das, was ich erreichen möchte.

Bislang ist mir klar, dass das Deaktivieren beider Häkchen (im Bild oben) das Problem löst, aber wie schreibe ich den CSS-Code?

Dies ist der Code, den ich derzeit verwende, um das Widget nach meinen Wünschen anzupassen.

span[data-pin-log="pinterest"] {
    overflow: scroll;
    overflow-x: hidden;
}
span[data-pin-log="embed_grid"]::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
span[data-pin-log="embed_grid"]::-webkit-scrollbar-thumb {
    background: #FF0000;
}

#pinterest [class$=_button] {
  display: none !important;
}
#pinterest [class$=_button] {
  display: none !important;
}
#pinterest [class$=_hd] {
display: none !important;
}
body > span[data-pin-log="embed_grid"] {
  border: none;
}
<a data-pin-do="embedBoard" data-pin-board-width="350" data-pin-scale-height="500" data-pin-scale-width="130" href="https://www.pinterest.co.uk/toastedmacarons/rich-boys-city-girls/"></a>
<script async defer src="https://assets.pinterest.com/js/pinit.js"></script>

Wenn es hilft, ist dieses Widget genau hier.

Meine CSS-Kenntnisse sind sehr begrenzt, daher bin ich für jede Hilfe sehr dankbar. Vielen Dank im Voraus :))

P粉187160883
P粉187160883

Antworte allen(1)
P粉665427988

按照我的CSS代码:

/* Remove scrollbar */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
    overflow: scroll;
    overflow-x: hidden;
}
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
}

/* Remove border */
body > span[data-pin-log="embed_grid"] {
  border: none;
  padding: 0 !important;
}

/* Remove padding */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
  padding: 0;
}

/* Hide header (pinterest logo) */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]:first-child {
  display: none;
}

/* Hide follow button */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_user_ft"]:last-child {
  display: none;
}

Codepen 上的完整示例

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage