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?
Related
I lifted the code to create a horizontal card for my band's website which can be seen here:
http://www.jukeboxjunkies.rocks/Song
I really like the look - but when the cards are viewed on a mobile device, the rows stack and I don't like it as much.
The version I like
vs:
the version I don't like (shows like this on smaller devices)
So, 2 things...
How do I prevent the rows from stacking?
I need to add a link on the far right that will just say "Request" - This will show up based on a setting in my database (basically if I turn on requests for the gig) - I am not worried about the styling, I can do that later (although I just will want it centered top to bottom of the card). But I need help with bootstrap code to show or not show.
I can put the HTML code in here - but it can be seen on the site - let me know if I need to post it here and I will.
#1
On the card, change d-sm-flex to d-flex. d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don't want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath
#2
It looks like you already have it below the card within the card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.
For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:
.card.flex-sm-column.flex-md-row
.card-footer.align-self-md-center
I would also recommend that if you make any CSS selector adjustments, don't make them directly on the .card selector. Add another CSS class to these specific cards, like <div class="card card--song" />, so that you don't override the global .card styling provided by bootstrap and instead override it at a component level (.card--song).
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/
So I am working on a prosject learning twitter bootstrap but got into the problem being that the website is not actually mobile friendly and look bad on big screens.
Here is the link:
jsfiddle: http://jsfiddle.net/6LsG7/
The sticky footer also covers alot of the content.
It seems that you are not using any classes provided by bootstrap. Instead you are creating your own id's? Bootstrap has a structured framework with the use of classes such as "container", "nav", "column".
For you to obtain a responsive design you must abide by the classes pre-provided. Might I suggest you check out a WYSIWYG bootstrap layout maker such as LayoutIt.
Bootstrap comes with a grid-like architecture that will allow you to create sections in your page so that they all line up and stack appropriately. Become familiar with this first and then assign the right classes to each section. For example:
col-lg-12 is will create a section 100% wide.
col-lg-11 will create a section ~90% wide
...
col-lg-6 will create a section 50% wide
and so forth.
So to create the right placement of your divs or sections. add a row class to every section that is stackable.
If you are having two sections side-side inside this row, add a col-lg-6 to each and they will line up next to each other and on top of each on mobile.
Now, to the obvious problems that I saw right away.
Between your body tags, create a wrapper class div that will contain your page and define it's width.
Do not use so much positioning. Specially position:fixed. This is what makes things sticky and messy. You wan to make use of your margin, padding, floats, and displays properties to properly align things.
Give it a try before I hand you any code. I want to see your brain work first. Then we'll trouble shoot some more.
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.