Hide the scrollbars and the box shadow in pinterest widget

Question

I tried

#pinterest-container [class$=_img] {
  display: block !important;
  box-shadow: none !important;
  border-radius: 0 !important;  
}

#pinterest-container [class$=_col] {
  padding: 0;
}

from this post Minimal Pinterest Widget with CSS and a couple other posts but the border (box-shadow) doesn't budge. What can i do? Would changing the color work.

Also I need help with hiding the scroll bar of the widget (but still be able to scroll) on all browsers.

I tried this but it removes all scroll bars from the embedded page. I just want to remove the scrollbars of the widget only.

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

I have limited knowledge on CSS so please help and thank you in advance.

Answer 1

Scrollbar

In your solution, you removed the scrolling option from all html elements, which is not what you need. Within the iframe, you need to find the element that has a scroll bar within the pinterest widget. This element is a span. Let's see how to distinguish it from other spans. It has a special attribute that I believe is only found in the pinterest widget: "data-pin-log."

Using this, I removed the scroll bar exclusively from the pinterest widget:

span[data-pin-log="embed_grid"] {
    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;
}

Show example in codepen

BoxShadow (?) --> maybe Border?

Without an example code, I don't know what box-shadow is being referred to. The widget has a visible border around it. I created an image of it and removed it using a similar method as above.

Unfortunately, this removes the border from all Pinterest spans undesirably:

span[data-pin-log="embed_grid"] {
  border: none;
}

To precisely remove it only from the outer container, a more specific CSS selector is needed:

body > span[data-pin-log="embed_grid"] {
  border: none;
}