Enabling scroll for content on "ALIEN Deviation" Pen

[drone4four]

The very talented Marco Dell’Anna created a spectacular CodePen titled “ALIEN – Deviation of microcosm”. Here is his original:

https://codepen.io/plasm/pen/JNPXxg

Fun, eh?

Anyways, I’ve adapted it into a personal side-project I am working on. On my webpage, I’ve added a few lines of text and I noticed that at narrow (like mobile) resolutions, some of the lines of text are cut off and you can no longer see the main heading.

Based on Marco’s Pen, here is what I am working with:

https://codepen.io/Angeles4four/pen/QXPzvY

To really replicate the issue I am describing, it’s best to view my Pen using Chrome’s developer tools with a narrowed horizontal width. Another way to see what I am trying to describe is by emulating the resolution of an iPhone6/7/8 in Chrome’s developer tools. Notice the content obscures <h1> and <h3>. It’s not possible to scroll up and down to see the headings properly. How do I enable scrolling to view the obscured content in my pen at narrower resolutions?

I’m not sure if there is an easy CSS technique to invoke a certain elemental property or value to fix this. What can you people make of this?

I’m wondering if Chris Coyier may have written about this topic, I’m just not sure what search terms to use on Google to locate the CSS technique to deal with the issue I am struggling to describe.

[erukajuminten99]

so cool stuff.. to adding this code, no need another code? sorry i’m new to css

[sukaram]

I don’t know if this is the right approach but here is what I have got. Please, refer to this link.

https://codepen.io/anon/pen/RzXMPq

[drone4four]

I wrote a lengthy follow up post but it looks like the spam filters removed it. Would a mod be able to re-instate my post? Thanks.

[drone4four]

Hi everyone! I’ve waited a week and it appears the mods were didn’t see my two requests to un-filter my previous post. Here is my post verbatim again:

Eureka! This works. Thank you, @sukaram! It scrolls perfectly.

I compared the CSS you suggested in your forked CodePen and transferred it to my local dev workspace. The biggest change that you made that I noticed was the addition of the canvas element to my CSS. You also added a box-sizing property to the wild card element. You additionally commented out the relative position property within the body element. All of this seems to have answered my initial question. Thanks!

I’ve encountered a new issue though. Using Chrome’s Developer Tools, I’ve pin-pointed the source of the new issue to the newly introduced canvas element, which I don’t fully understand. I’ve read w3school’s doc along with Chris Coyier’s canvas blog post and I don’t really understand how to use canvas.

Here is my fresh CodePen:

https://codepen.io/Angeles4four/pen/LwEVwR

This new issue is apparent at narrower resolutions (kinda like the previous issue). There is a red rectangular box at the bottom of the window/screen, as it appears in this image: https://imgur.com/a/c1HqcMI

How might you fix this, @sukaram? What property or value may be necessary to eliminate this red box? Would anyone else care to comment or jump in here?

[Author]

Posts