I was looking at codes(via inspector mode)for the at the Airbnb mobile app version.Screenshot with extra pixel indicated in red marker As shown in the screenshot, there are extra pixels added to the image, image header("Online Experiences"), and description ("Unique activities... hosts."). I'm not a coder, so maybe I'm not understanding it correctly. From the development perspective, could someone explain why the blue block is defined in such manner?
From UX/UI perspective, designers would usually define the padding(green blocks), but don't think these extra pixels (indicated in red marker) are defined by designers.
If you look at the margin of the blue box, then you can see, that it's centered and the margin on the right has the same size as on the left side. So the responsiveness of that div box is correct.
The "extra pixels" part I think is because the picture can't fit your screen and the picture's attributes are set to keep it's x-y side ratio, plus I think there is a min-height and a width: 100% attribute for that picture.
Ideally the picture can accomplish both min-height and width: 100% css rules, but since the width of the picture is relatively so big comparing to your screen's width, the browser can't accomplish the width: 100% rule and this is how you see the result.
Related
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
I am reading A tale of two viewport and I could not follow the explanation at Consequences. He claims that when one zooms into his page, the upper right corner is not blue anymore even though it has width:100%.
I do not understand why this should be the case. In fact, I cannot even reproduce it:
Could someone explain me on a more simple example what the author's point is?
You can see the effect by using "browser zoom" (not pinch zoom), i.e. ctrl+/-. You need horizontal scrolling to see the effect in the author's example.
When you hit ctrl+ a few times, you're increasing the size of a CSS pixel. This means fewer CSS pixels will fit into your browser window (viewport) and thus zooming in shrinks your viewport. For example, say your viewport is initially 800px wide. You zoom in to 200%. Since each CSS pixel is now double the size, your viewport only fits 400px.
The article's point is that even though the viewport shrunk, the content on the page hasn't (in terms of CSS pixels), it's still ~800px (or whatever the author specified it to) since only the pixel size has changed. This means sizes that rely on the viewport will now look disproportional to the rest of the content. In his example, the top bar is set to fill the viewport width 100%. When the content becomes larger than the viewport, the bar will not extend the same width as the content.
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
I want to overlay a form with fields on to an image. Essentially I have created a picture that resembles and artist's desk. I have uploaded the image here:
(source: saeedalkhirbash.com)
I want the "Personal Details" section to be on top of one part of the image (post-its on a desk) and the remaining "Information section" on top of the graph paper on the desk. I have all the fonts etc already.
I have tried two methods:
method1: Coding my image as a background-image. This is easy to get form elements on top. The problem is that I cannot work out how to make the image do both of the following:
retain its proportions, with the width equal to the device width (and height scaled to retain the image's proportions);
and always show the full height and width.
I have tried adjusting the background size in %s, auto, and using cover, contain - no combination seems to work.
method2: I can make my image fit nicely with very simple code:
<img src="*.png" style="width:device-width">
and this works great. Unfortunately I cannot work out how to overlay the form elements. I have tried using z-index:1 as below, but this achieves nothing... (I have tried for both the form and fieldset attributes.
<form style="z-index:1"><fieldset> input blah blah </fieldset><form>
How can i do this ?
using a background image will be the easiest way to go. I think you will have issues with scale when viewing on a mobile device depending on how many fields you are planning on using and where.
By setting the form position to relative, and then any fieldsets to absolute, will allow you to posistion them accurately.
Your css for the background, so that it scales correctly, would look something like:
background: url('http://www.saeedalkhirbash.com/backgroundfinally.png') top left / 100% 100% no-repeat;
By setting the width of your form to be relative to its container, it will resize as the screen size changes. Using media queries is an easy way to resize based on device/screen width.
#media only screen and (max-width : 480px) {
div{width:300px;height:300px;}
}
Here is an example code pen for you - http://codepen.io/lukeocom/pen/bfeGC/
Resize the window so that it is less than 480px wide and see what happens...
For a version of the above demo that uses a relative width - http://codepen.io/lukeocom/pen/jBxzI/
Hope this helps
I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.