Trouble placing element on responsive webpage

[Dingske]

Hi folks,

I’m designing a single responsive webpage but am having trouble finding the right way to execute the desired layout with css.
And I’m a JavaScript noob.

What I wish to show in the browser window when first viewing the page:

A 300x100px logo floating in the center of the screen (but doesn’t stick when you start scrolling).
Plus a text block with dimensions of 300x1000px underneath. But only the first 60px are visible at the bottom of the screen. To view the rest you have to scroll down.

What kind JavaScript code should I begin with?
Thanks.

[Senff]

Perhaps you won’t even need Javascript (unless I misunderstand what you mean), but there’s not much responsiveness about what you describe.

Do you have a link to your site, or an example in Codepen to see what you’ve tried so far?

[Dingske]

Hi Senff, thank you for responding.

Here is an example in Codepen: http://codepen.io/anon/pen/KpJXXd

The wish is that the ‘dingske-logo’ always starts centered when accessing the page from any device.
And that the two lines ‘Hi there, I’m DINGSKE.’ are visible near the bottom of the screen. To view the rest one will have to scroll.

You’ll also notice that the dimensions in my first post were only an example. :)

[Dingske]

Can anyone point me in the right direction to make the example in my first post work? Relatively. Please.

Thus ignoring the Codepen example. :)
I’ll find a way to make the rest work.

Thanks for your time.

[Shikkediel]

This should be a step closer to it?

.logo {
  height: calc(100vh - 60px);
}

.logo img {
  width: 280px;
  display: inline-block;
}

[Dingske]

Thanks Shikkediel, for taking that step!

One more to reach my destination. :)

[Author]

Posts