I have a row of several cards of different sizes. On larger screens it looks fine, like so:
but on smaller widths, the cards don't look great.
I would like to stack the cards, so that the key stats on the right are aligned underneath the Quant ratings on the left hand side.
Here is the website: https://cs50-final-stock.herokuapp.com/
Ok I figured this out. I leveraged the Bootstrap Docs to determine the proper classes for stacking on smaller screens. The key is adding sm to all of the col tags.
More info here: https://getbootstrap.com/docs/5.1/layout/grid/#stacked-to-horizontal
Related
I've been trying to make a responsive Nav-bar that is on top when Mobile and on side when Desktop.
The problem is that to achieve this I'm not sure what is the correct approach regarding the Rows and cols. Because on mobiles, I have a Row with col-x-12 for top-nav and another Row with col-x-12 for the content below.
But if i want to achieve a side by side cols (col-2 and col-10) for dekstop sizes, I have a problem regarding the 2 rows. They can't be side by side.
Also I tried to make 1 row and 2 cols, for navbar (col-md-12 col-lg-2).
For content (col-md-12 col-lg-10), but i don't know if its safe to have 2 cols-12 inside one single row, So, what would be the correct approach for this responsive navbar? thanks!
I may have a solution for you.
Try to make two div, one is only displayed in desktop resolution (it would contain the sidebar), and one is displayed in mobile resolution (would contain the topbar)
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Take a look at that https://getbootstrap.com/docs/4.3/utilities/display/
My web page is simply consisted of 3 sections:
1:section 1, on the left, it is responsible for displaying messages, it is a small area and is "aligned" to the left of the screen.
2:section 2, on the right, it is another area and is "aligned" to the right of the screen.
3:section 3, on the middle, it is the "main" area of the page and it is consisted of quite a few number of elements that "fixed" with the screen by many div tag. I really think I over use the div here.
I have already made the section 3 look organized by manually fixed (define absolute position and pixel) those div. But it only look good in my computer with one screen size. I want to make it responsive to other devices by using mediaQuery. But since I got so many div it will be a pain to specifies the position for each. Can I wrapp the whole section 3 with another div wrapper and then just change this wrapper position? I tried but I failed.
Or is there another efficient way? I am open for bootstrap but I can not find any framework similar to my design. And My design is really simple so get it done without a template would be the best.
Section 3 looks like this:
https://jsfiddle.net/9jpdw4f7/
I'd like to create a responsive (or adaptive) site based on the wireframes here (also below). Essentially a 12 column grid with the first 1-2 filled with images and text in certain vertical areas.
How could I go about this? My thinking so far has been to create a dedicated left column, and then push everything else to the right of it. I feel as if this isn't semantic though, and am being forced to manually space items with absolute values.
The grid should work at both large (desktop) and small (mobile) sizes. Thanks for your help.
I trying the CSS-Framework Bootstrap and I have a question.
Here is the Fiddle: http://jsfiddle.net/hzAUz/
Let's say I have a div, with 3 equal divs inside of it:
<div id="main" class="row">
<div id="columnleft" class="span4">LEFT</div>
<div id="MainContent" class="span4">Content</div>
<div id="columnrigh" class="span4">Right</div>
</div>
So what happens, when you use Bootstrap, is that as soon as the windows get smaller, the Divs are stacked in this priority:
1. Left
2. Content
3. Right
But it makes sense, to put the content first.
Does anyone know how can insert priorities when using the bootstrap-responsive.css?
Thank you very much in advance.
KG,
George
There's a few ways you can do this.
One would be:
Start at the mobile size, and design "mobile first". That would make your small screen stuff easy, and then you could add additional classes to those containers to accommodate the larger screen sizes.
Another option:
Plan for mobile, and see if you can't either hide/convert your elements in smaller screen sizes to something more mobile friendly. ie...your left stack of nav links become a select menu in mobile; thus, only taking up a single line of real estate.
My preference is to use javascript, and convert left, and top navigation into a show/hide element (button) in mobile size. That way, I've just a logo and button in the top of my UI, and content immediately following.
I do not believe there is a way in Bootstrap 2, but if you were to move to Bootstrap 3, you can control column ordering. See http://getbootstrap.com/css/#grid-column-ordering for details.
Definitively upgrade to bootstrap 3 if you can, as #Sean suggested, but if you can't right now, some of these answers may help:
In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?
I am new to using Skeleton CSS grids, so please excuse my ignorance!
My problem seems a simple one at first, but it's had me a bit stumped.
Say for example, that I have a website with a left column sidebar at 4 columns wide and then a right column content area spanning 12 columns. Something like this:
On smaller screen sizes, the sidebar collapses to be on top of the main content area. This is not what I want though...because of the linear nature at smaller sizes, I want the sidebar to appear below the main area, so that content is shown 'first' on more mobile devices.
The default behaviour of Skeleton is to stack this sidebar on top of the main area.
Any ideas as to a solution on this? Could I perhaps use negative margins and semantically adjust the markup to place the sidebar below the main area?
Thanks,
Michael.