Jump to content
Sandor

Designing for mobile -- short pages

Recommended Posts

One of the pages I've got for a mobile application is "shorter" than most phone screens. Since I've taken pains to use a color schema that does not use white backgrounds, is there any way to tell the browser what color to paint the otherwise undefined space? I'm using w3.css color tags in the body and want to match the background to the last container in the stack, so that any remaining whitespace is tinted.

 

My first thought was to use the background-color property. I'm not sure if it plays well with w3.css tagging, and even if I color-code around that, it seems to conflict with the max-width property I'm using to force my browser to render a mobile-phone screen sized output.

 

I realize that I can go forward on the production version without the max-width field set and that will likely be the end of the issue, but I'd like to 'see it' during testing.

 

Any thoughts?

 

 

 

Share this post


Link to post
Share on other sites

Usually if the content is shorter?, you would use min-height: and for a unit you can use 'vh' with 100vh filling the total viewport height of the device. I don't see how background will conflict with max-width:, again! usually the wrapping and content containers are block elements, or set as display block styled element so they will occupy the total width available to them. An issue only occurs if the elements are floated then they need content to force them to the total width available to them, which seems to be what you are describing?

Share this post


Link to post
Share on other sites

Ok, that helped quite a bit.

print "<body style=\"max-width:400px; min-height: 100vh; background-color: steelblue;\">\n";

This worked as expected. I suspect that I was not passing the multiple entries properly and the browser followed neither direction.

 

But its uncovered another issue. If your using a graphic in a display container, and the graphic has transparency in it, it shows the background color above, not the background of the container its in. Since I'm using a different container background for each block in the stack, this is... undesired operation.

 

Programming, right? Fix one issue and find two more. *grin*

Share this post


Link to post
Share on other sites

IF you overlapping using position: relative/absolute; you may have conflicting z-index: auto; (default setting) layering, unless you set these manually to force a specific layering of these container elements.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...