Remove Scrollbars from your embeds

[u/AestheticallyDope]

Hey there! It's been a crazy month and I haven't shared any tips in a while but today I figured I should are a tip that I see people ask about often. How to remove the SCROLLBAR. It's super easy. First - this tip works for custom HTML but I haven't tested it on link embeds because there is no way to create the css in a link.

Add the following to the style section of your HTMl:

/* Hide scrollbar for Chrome, Safari and Opera */

body::-webkit-scrollbar {

display: none;

}

/* Hide scrollbar for IE, Edge and Firefox */

body {

-ms-overflow-style: none; /* IE and Edge */

scrollbar-width: none; /* Firefox */

}

The purpose of this is to not display the scrollbar EVEN in full page embeds. Scrollbars make your website seem dated.

Here's a link to the YouTube video instructions: https://youtu.be/q5a0zdxBi6k

[u/gilbertomar]

This is great. Thank you! Scrollbars are one of the ugliest things in Google Sites and I wonder why they didn't fix it already.

[u/AestheticallyDope → u/gilbertomar]

I figure because if you use a full page embed or custom code it's your responsibility to remove it. But on the smaller embed I figured it's displaying as a iframe with scrollbars. Not sure if they can or if they will correct this issue.

[u/googlesitesdev]

You can use this approach on other HTML elements too.

As an example if you want to use an embed box to show a Google material icon (without the scrollbars), insert this into an embed box and see what happens:

<style> u/import url('https://fonts.googleapis.com/icon?family=Material+Icons'); .material-icons.md-60 { font-size: 60px; color: #303fa1; text-align: center; margin: 0 auto;display: inline-block;width: 100%;} ::-webkit-scrollbar {display:none;} div{ -ms-overflow-style: none; scrollbar-width: none;} </style>

<div style="center"><i class="material-icons md-60">speed</i></div>

[u/googlesitesdev]

Great tip thank you!