A CSS Grid question

1

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?

Thank you!

Olly

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

2

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:

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

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