# A CSS Grid question

**URL:** <https://forum.freecodecamp.org/t/a-css-grid-question/416969>\
**Category:** General\
**Created:** [August 24, 2020, 11:32am UTC](https://forum.freecodecamp.org/t/a-css-grid-question/416969 "2020-08-24T11:32:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ollyb](https://avatars.discourse-cdn.com/v4/letter/o/6de8d8/32.png) [@ollyb](https://forum.freecodecamp.org/u/ollyb)\
**Post date:** [August 24, 2020, 11:32am UTC](https://forum.freecodecamp.org/t/a-css-grid-question/416969/1 "2020-08-24T11:32:33Z")

</div>

Hi guys!

I’m more or less finished with the product landing page I think, however there is one problem I’m having with “img-top” (the mandala image in the grid near the top of page) -  
It is not fully responsive. As the browser window shrinks, the image also shrinks but then hits a point where it stops shrinking and then overflows it’s container. Can somebody tell me why?

> **[Responsive product landing page](https://codepen.io/ollybolland/pen/vYGydJB)**
>
> ...

Thank you!

Olly

Edit - Also the video embed doesn’t work. Is this a codepen thing or have I done it wrong?

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [August 24, 2020, 12:03pm UTC](https://forum.freecodecamp.org/t/a-css-grid-question/416969/2 "2020-08-24T12:03:32Z")

</div>

> [@ollyb](#):
>
> As the browser window shrinks, the image also shrinks but then hits a point where it stops shrinking and then overflows it’s container. Can somebody tell me why?

Hello there,

I am not sure I am seeing what you are. The first image is very responsive, and the only reason the scrollbar appears for me, is the `imgs-bottom`, because of the fixed width property:

```auto
.imgs-bottom {
  width: 280px;
  height: 380px;
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
  margin: auto;
}

```

> [@ollyb](#):
>
> Also the video embed doesn’t work. Is this a codepen thing or have I done it wrong?

This is more of an issue with CodePen, and if you open your console, you should see this error:

> Refused to display `'https://www.youtube.com/watch?v=q2fIWB8o-bs'` in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

You can get it to work, by getting an `embed` link from YouTube (the link will have the word _embed_ somewhere in the URL)

Hope this helps

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:43pm UTC](https://forum.freecodecamp.org/t/a-css-grid-question/416969/3 "2021-06-01T18:43:01Z")

</div>

Closed on June 1, 2021, 6:43pm UTC