Jump to content

Designing for mobile -- short pages


Sandor

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?

 

 

 

Link to comment
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?

Link to comment
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*

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...