Setting up first responsive page

I recently gotten my knuckles rapped by assuming the css default width value :frowning:

2 Likes

Hi there John,

it appears that my post has, unfortunately,
caused a certain amount of confusion. :wonky:

@UpstateLeafPeeper had asked me why
I had removed width: 100% from his code
and on reflection my answer was poorly
worded and misleading. :unhappy:

I really should have answered it like this…

Your <div id="containerBody"> being a
block-level element with default width: auto
will automatically fill the available space. The
attribute - width:100% in your code can be
considered as superfluous to requirements.

coothead

1 Like

No problem, I just didn’t want you to also get your knuckles rapped, it makes typing painful :slight_smile:

I really like your revised response :slight_smile:

1 Like

I would assume that @UpstateLeafPeeper
will also be pleased that you drew my attention
to that extremely sloppy reply posted of him. .:biggrin:

coothead

1 Like

That’s a good point and why I now prefer position:sticky instead of position:fixed as it suffers from none of those magic number issues and works better in mobiles unlike fixed positioning.

https://codepen.io/paulobrien/pen/OJPPdjj

2 Likes

In your example I noticed that header z-index:99 was set and in desktop Opera and Firefox I was able to see the content scroll behind the header?

I tried adjusting the opacity and the content could not be seen scrolling behind the header. Any particular reason for the scrolling content to be visible?

/*   background: rgba(100, 100, 100, 0.8); */
  background: rgba(100, 100, 100, 1.0);

Because I like it :slight_smile:

It also helps (slightly) with accessibility because you can see what’s happening. Fixed elements interfere with the natural flow of the document and users can be confused when things don’t behave as they expect. Partial opacity also helps when you have in-page links and the fixed header obscures the target. At least if the header is very slightly opaque you can see where the content started.

In the end it’s just a personal preference :slight_smile:

3 Likes

Many thanks for the detailed explanation.

The suggested reasons never crossed my mind :frowning:

I’m convinced :slight_smile:

1 Like