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%
Related
Using bootstrap, how can we make the height of two columns exactly the same?
For example:
<div class="row">
<div class="col-md-6">
Too much in here
</div>
<div class="col-md-6">
A little here resulting in shorter height
</div>
</div>
All I found through google or other posts asking the same thing here either did not work or if it did, it killed the responsiveness of bootstrap.
For example the flex technique works but it kills the responsive effect of bootstrap.
What is the proper and standard solution for this?
Fairly new to design and coding, and working on my first freeCodeCamp project. Anyway, I have a row that's divided into three medium columns like so:
<div class="row">
<div class="col-md-4 pb-3"></div>
<div class="col-md-4 pb-3"></div>
<div class="col-md-4 pb-3"></div>
</div>
The pb-3 class is just to add some padding below each item for mobile. Anyway, each column has a YouTube video embedded in it. On desktop, the padding on the outside edges of the outer columns is just right, but there's too much padding BETWEEN the columns, presumably because each column is providing its own padding, so the padding is doubled. I've tried tweaking the padding to fix this, but the problem is that if I give different columns different padding, the YouTube content is resized and looks wonky.
Here's the link to the full CodePen if anyone wants to take a closer look.
Thanks!
~Seth~
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 have a list of items that I'd like to align by the top image, instead if the bottom text as it is currently doing.
Here is how it appears:
Is there a simple way that this is achieved in CSS? I am using Bootstrap, if there is a way to do that also.
It sounds like what you're asking for is actually the default behaviour...
<div class="containerI">
<div class="col-xs-2 text-center">
<h3 class="glyphicon glyphicon-ok-circle"></h3><!-- put your image here instead of h3+glyphicon if you're using a jpg -->
<p>Simple Visa Card
</p></div>
DEMO: http://www.bootply.com/KEN4TgnX0f
Is it possible you've got some custom CSS affecting this?
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.