Hello!
I wanted to add a ScoreStream Banner Widget to my website. When I added it, it came out big and large, literally covering the whole website (https://try-gsw-plz.glitch.me). I messaged ScoreStream on how to fix it, and they told me that since they weren’t familiar with Glitch, they said that there probably is a section for particular objects you want to place. If there is a place, can you tell me? If not, then is it possible for you guys to send me the code.
Thanks!
Glitch User
Hi @HammadGSW and welcome to the Glitch community! 
When you created your Scorestream widget, it said this underneath:
Widget will fill its html container. Make sure the container has a valid width and height.
So basically, you need to put a div or other element around your second widget, and set some dimensions with CSS.
You also have one in the nav. The nav can be styled directly with CSS. (I will show how in a moment)
When I remixed your project and started to fix it, I noticed that you have stripped down the HTML a bit too much. You need to keep a head and body section in your HTML, as well as the DOCTYPE tag and some meta tags. This will help it to render properly on PC, Mac, iOS and Android in different countries.
<!DOCTYPE HTML>
<html>
<head>
<title>Scores</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
CSS here
</style>
</head>
<body>
Your code here
...
Lastly, when you have two widgets, you only need to keep one of the script imports:
<script async="async" type="text/javascript" src="https://scorestream.com/apiJsCdn/widgets/embed.js"></script>
Because they are both the same! So you don’t need to repeat it 
So, putting it all together:
<!DOCTYPE html>
<html>
<head>
<title>Scores</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
nav {
height: 100px;
}
.container {
height: 600px;
width: 400px;
}
h1 { text-decoration: underline; }
h1,h2,h3,h4 {
text-align: center;
font-style: italic;
}
</style>
</head>
<body>
<nav>
<div
class="scorestream-widget-container"
data-ss_widget_type="horzScoreboard"
data-user-widget-id="44917"
></div>
</nav>
<h1>
GSW TRY YAH @SCORESTREAM
</h1>
<h4>I hope it works Inshallah!</h4>
<h2>THE SITE IS COMING</h2>
<div class="container">
<div
class="scorestream-widget-container"
data-ss_widget_type="vertScoreboard"
style="height:600px;"
data-user-widget-id="44922"
></div>
</div>
<script
async="async"
type="text/javascript"
src="https://scorestream.com/apiJsCdn/widgets/embed.js"
></script>
</body>
</html>
Here’s my remixed, fixed, Glitch project: https://glitch.com/edit/#!/sg-scorestream?path=index.html
You are learning and making a good start! But your HTML looks a little mixed up at times, like you have a h2 inside a h4 and you use a lot of <i> and <center> tags, which we don’t really do any more (we use CSS instead).
So I just want to direct you to my basic Let’s make websites article which has some introductory ideas for writing HTML on Glitch!
Have fun
Well, you might be saying this and I don’t understand, but I have one widget and I want to change the size, and on ScoreStream it told me to use containers. My problem is that the scoreboard is going all over the page.
Hey Hammad,
Yeah! If you read the above again, I rewrote your page to fix it so it now looks like this:
I put the code above in a details section marked “Full code” and explained how it works for you! 
You can also just go to my project edit link and copy the code from there! https://glitch.com/edit/#!/sg-scorestream?path=index.html
Hope it helps.
Oh, Sorry. Didn’t scroll down completely on your first post. Thanks a Lot!
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.
