The first image is what i have and the second is the result i want to accomplish.
so far ive realised that disabling the two ticks (in the picture above) does the trick but how do write the css code?
Here's the code im currently using 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="//assets.pinterest.com/js/pinit.js"></script>
If it helps this widget is live on here.
I have very limited knowledge on CSS so any help is appreciated. Thank you in advance :))

Follow my css code:
Full example on Codepen