I have an issue I can seem to get a grip of.
On my website I have 2 'Cols' (col-md-9 and col-md-3) this then on the web puts them side by side (which is fine).
The right hand side (col-md-3) contains 3 panels in it which run underneath each other.
On a tablet size device, I have made it (col-sm-12 and col-sm-12) which puts the right hand column at the bottom which I want.
and I have added col-sm-4 to each panel so instead of running underneath each other they run side by side on the tablet.
BUT what I want to know is, is there a way of only using the col-sm-4 when tablet size otherwise don't apply a 'col'?
I've tried using adding the col-md-12 to the panels but this shrinks them and makes them look odd.
This is a hard thing to explain.
Bottomline is, if small, apply the 'col' otherwise don't.
To resolve it I removed the col from my controlling DIV and added the sizes to each panel
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/
Context, my page is divided like so:
Left hand side (col-xs-8)
Right hand side (col-xs-4)
The right hand side should remain fixed and not scroll (there are some elements on the left hand side that need scrolling). The right hand side has the following code:
<div class="col-xs-4">
<div class="row">
<div class="col-xs-10 col-xs-offset-1>
<div class="table-responsive">
<table>
The problem is that the row doesn't seem to expand the full width of the col-xs-4, and I'm not sure why. If I try to add a width:100% style on the row, it seems to go crazy and expand to a normal browser window even though it's nested within a col-xs-4. And the reason this is a problem by the way is that the table needs to be wider than it is because now it's completely illegible.
I've been doing some troubleshooting but am stuck. It looks like the problem is that the col-xs-4 is not even "registering" on the page. If you do an inspect element, the col-xs-8 of the left hand side is visible, but the col-xs-4 is not, which indicates that the col-xs-8 isn't closed, but I've looked everywhere and it is....
Anyways, would love help, here's the working staging environment link since this is a little hard to explain: https://hidden-tundra-8656.herokuapp.com/request
I'm working on a small project (http://laurensvandijk.com/as/diensten.html) and I'm trying to get the pricing panels to align horizontally in tablet portrait view. Currently they are stacked on top of each other). I'd like to see them next to each other in tablet view. In mobile view however, I would like them to be stacked on top of each other as it is.
I'm probably missing something in the media queries of my css file, but can't seem to figure out what's making them stack on top of each other when there is clearly enough space available to align them horizontally.
The class you have applied to those blocks is col-lg-4 col-md-4 sm-6. Note that the last one is missing the col- prefix.
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?