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.
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/
I'm trying to create a list of horizontal tabs that can be selected and the tab content has an additional list of tabs (stacked) that shows the content of those tabs next to them.
I created a bootply here so you can see what I mean.
Whenever resizing down to xs sizes the text in the tabs will overflow for the stacked tabs and for tabs with a dropdown the dropdown options will be disproportional to the size of the tab
Haven't really found a decent way to get around it. What's a way to fix this? Thought about doing media queries but not sure that's the best route to go.
In my bootply I was giving the nested nav stacked tabs (in the tab content) section the class of nav-stacked with a class of col-xs-3. This was causing problems for whatever reason at these smaller screen sizes.
Removing the nav-stacked class and leaving it to be just the regular nav nav-pills class worked and correctly shows since each tab is pushed to be stacked anyways due to the small column size. No text overflow.
What about larger screen sizes if you still want them stacked? I just did a hackish solution and set col-xs-3 col-sm-2 col-md-1 so it still forces the tabs to be stacked.
Updated bootply
There's one spot switching from md-sm (I think) could be xs-sm sizes that the tabs display horizontally again. Easily fixed with a media query.
I have been at this problem for hours.
I am looking to make my website responsive, I have started with mobile first and am working on creating it for the desktop.
My issue:
when I edit the .col for tablet or desktop, the columns will respond but they will not be on the same row.
When the breakpoint hits for the desktop I would like my picture to be to the right of the menu, and the content to be to the right of the picture.
if I make my
#menu{float:left} //under CSS desktop breakpoint
then i will get my desired result but the menu will lose it's column width.
https://jsfiddle.net/Lrtpjhh7/
any advice? I feel as if I am on the right track but something is not working.
In order to achieve the desired outcome you need to:
Wrap whatever you want displayed near the menu inside a col-9 wrapper.
Add float:left to your [class^="col-"].
Here's your fixed fiddle.
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
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?