Home  >  Q&A  >  body text

How to remove padding around widgets within borders?

The first picture is what I have, the second picture is what I want to accomplish.

So far I realize that disabling both ticks (in the picture above) solves the problem, but how do I write the css code?

This is the code I currently use to adjust the widget to my liking.

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>

If it helps, the widget is here.

My knowledge of CSS is very limited, so any help is greatly appreciated. Thank you in advance :))

P粉187160883P粉187160883378 days ago580

reply all(1)I'll reply

  • P粉665427988

    P粉6654279882023-09-08 12:10:48

    Follow my CSS code:

    /* 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;
    }
    

    Full example on Codepen

    reply
    0
  • Cancelreply