What is the current standard way to handle responsive images in a mobile first approach?
That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?
Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.
Exactly, as sanusart wrote you.
For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:
<div class="well">
<img src="img/logo.png" class="img-polaroid" />
</div>
And your image will adapt its dimensions according to screen resolution.
If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:
<div class="well">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"><img src="img/sunflower.jpg" /></div>
<div class="span2"></div>
</div>
</div>
But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.
Related
I'm stacking a series of small divs to show a series of statistics. The problem is to display them correctly on a mobile phone. Can you suggest an alternative for me? It's worth noticing that this design came from an admin template.
This is what you'd see on a bigger screen:
And the following is the way the cubes are displayed while using a cellphone:
<div class="col-2">
<div class="bg-success p-10 text-white text-center">
<i class="fas fa-warehouse m-b-5 font-16"></i>
<h5 class="m-b-0 m-t-5">414</h5>
<small class="font-light">Bodega stock</small>
</div>
</div>
I've read about responsive typography but I'm not sure how should I proceed.
From a designer point of view, I think what you should do is making the bottom columns be rows instead, so, in mobile, they would all be the same width as the blue box.
This should be pretty easy using Bootstrap 4, your col div would be:
<div class="col-xs-6 col-sm-4> ... </div>
Something like that.
In my opinion you have two options :
Display the 'total disponible' and 'total reversa' side by side on big screen, but one under each other on responsive, which can be easily done using flexbox
Like a fellow said above, display the green, black and yellow divs in column, with width set to 100%
I'm building a section with a text on the left side and a background image tied to a right side of a browser. Both text and image have about 50% width while using desktop device.
For desktop device solution, I've coded it like this:
http://www.bootply.com/xxyOcA9N5n
However, problem arises when I try to make it responsive. My preferred goal would be that the content gradually "pushes" background image to the right (out of the browser's "canvas"). In extreme case, it would look like this: Image nearly disappeared and text is readable.
Can you please help me figure out, how to solve this?
Add another col-sm-6 and place the image in there with a 100% width so it scales as the size gets smaller. You can also use media queries to define how you want it to look at various sizes.
<div class="container-fluid hp-about">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Company</h2>
<p class="large">We are doing this and this and it is
awesome because this and that. Yeah and also this and that.
And also that.</p>
<p>More about us ยป</p>
</div>
<div class="col-sm-6"><img src=
"http://i.imgur.com/HGp1ot6.png"></div>
</div>
</div>
</div>
I am new to HTML5 and I have created a website with home page having few icons with absolute position, fixed top and left values.
But when the same is opened in mobile device, I have to scroll a lot, and the images are not coming in center as expected.
Please let me know your inputs for same, as I am new to HTML5 and would like to learn different aspect.
Thanks & Regards,
Mrudul
I'm going to take a wild guess and say you're using bootstrap to make things responsive.
If thats the case, you can simple add a class to images to make them scale correctly..
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
You can copy and paste this in your editor to test it.
This way, if the screen gets smaller, so will your image.
EDIT :
Also, if you want the image to be contained in a wrapper you can use the following structure :
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
</div>
</div>
</div>
I have a page that looks great in high resolution (1st screenshot) but in low resolution (second screenshot) row-fluid is being pushed over (so it's not in line with the VG-ES list item). Is there a way to fix this?
My Markup:
<div class="container">
<div class="row-fluid">
<div class="span8">Calendar</div>
<div class="span4">Event info</div>
</div>
</div>
This is how it should look (1280 x 720):
This is how it looks in low resolution (1152x720 or lower)
If the issue is that you want the calender to stay in the same position relative to the top menu, double check that the menu is also in a container > row-fluid grid. If it is, then try forcing the calendar to align left.
Good luck!
from the little experience I had with bootstrap this is just simply the way it is. bootstrap has some resolution key points defined through css media queries at the resolutions you mentioned.
you can edit the css media queries to meet your own needs.
So I'm writing a program that will need to resize elements based on the viewers screen size. The program is in jsp / sql/ xhtml / css and I have a few questions.
Is there any way to select a css file by saving the screen width to a jsp variable?
Is there a way to align a div below another div and use the above div as a sort of container for it? This question is a little complicated
Goal: To have an image with a text label underneath it. Problem: The div is part of a parent div, and the div serves an image that will changed based on the screen size.
Here's something like what I'm doing.
<div id="container">
<div id="inner">
<div class="1">--stuff</div>
<div class="2"><img src="server:8080/project?minutes=720&width=<%= out.print(width) %> </div> <-- want to align under this
<div class="3">--stuff</div>
</div>
<div id="label"> <--Want this div aligned underneath "2"
<div class="1">2.0</div> <-- Want the text at 25% of the image (right)
<div class="2">4.0</div> <-- Want the text at 50% of the image (right)
<div class="3">6.0</div> <-- Want the text at 75% of the image (right)
<div class="4">8.0</div> <-- Want the text at 100% of the image (right)
</div>
</div>
What you are wanting to do - Responsive Design - is very cool but also gets pretty complicated. It takes a bit of learning, but CodeSchool has a high quality course called Journey Into Mobile that covers adaptive screen sizes and should get you on the right track.
You'll need to dig into Responsive design, Media Queries & Fluid layouts.
As mentioned above Codeschool does have a great course covering these areas.