0

I have a website that I am building for school and I wanted to spice it up a little! So I added a effect where objects stack on top of each other. Which works great, but if the content is larger than 100vh than its cutoff, the only way to make the objects set to the screen is to have the height fixed. Would adding break points solve this problem to dynamically change the font size? Thanks!

Below fail

You can't acsess the content on smaller screens because it gets cut off. In this image then content is cutoff.

height: 100vh;
width: 100%;
position: sticky;
top: 0;
background-color: #e6e6e6;
scroll-snap-align: start;

This code is all that drives the effect.

goatherder13
  • 49
  • 6

2 Answers2

0

Try:

overflow-y:scroll;

This should create a scroll-bar so you can access the info.

Agent Biscutt
  • 712
  • 4
  • 17
  • I have an effect like this, [Link](https://vinceumo.github.io/devNotes/CSS/slide-stacking-effect-using-position-sticky/#basic-effect-with-position-sticky) and it forces me to find another way than that – goatherder13 Oct 11 '21 at 20:50
0

I see what you are trying to do now. Try using font scaling, this post will explain it more than I could:

Font scaling based on width of container

Agent Biscutt
  • 712
  • 4
  • 17