I know how to change stack order using push-pull classes, but as far as I know (and tried) it only works if you have two columns.
In my design I have a container with a box nested floating on the top-left. I would like it to be under the container content when viewing on mobile.
Here is a sketch of how it is on desktop: https://db.tt/nZGvCih0
And this is how I want it to look on mobile: https://db.tt/Td6PlwT5
Right now the box is on top of the container content.
(I'm using Bootstrap 3 and prefer not to use js)
I think you can hide divs and display another div while loading on smaller devices .Check this link out it may help you
http://getbootstrap.com/css/#responsive-utilities
Thanks
Which you are seeking is a 'float: bottom' css and alas my friend, there is none (Ref: How can I position my div at the bottom of its container?).
There are several alternatives which you can consider:
Create two divs 'content', one for mobile and one for desktop. You can hide them respectively by using the responsive utilities mentioned by #sunilkjt.
Use CSS3 responsive media queries to do a 'position: absolute' on the div 'box' when on mobile, hence placing it at the bottom.
If you provide us with your html/css, i can create a jsfiddle that suits your needs.
Related
I'm fairly new to bootstrap and I having trouble making my site do what I want it to. Hopefully someone can steer me in the right direction.
I used bootstrap to make a nice responsive grid for my site within a container. The problem I am having is that I would like my backgrounds (different backgrounds in different sections) to fill browser window while the page content stays at 1170px max-width. Is there anyway to do this?
of course. adding your own css is not that bad but make sure your css is in last (e.g , )
do this in your background telling your div
<div style="position:absolute; top:0;left:0;background-image: url('img/urbg.png');">
dont box here. experiment, play and explore. bootstrap is boxed dont get TRAP with BOOTSTRAP. its cool but you need to know when to handle design with image background. see this
CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported
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 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'm looking to create an html/css gallery with no spacing inbetween each gallery element. Just for some context, all the gallery elements are the same size and are list items contained in a ul inside a div. I already have media queries set up to readjust the rest of the site and the gallery image sizes. However the actual elements are inline-block so they adjust themselves. I want to know how I can make the elements so they animate to their new positions instead of just snapping to them. Adding the standard transition values to the css of any gallery related item didn't seem to work. I'm not sure if I need to change my markup for this to work but any help would be appreciated!
Animation can not be achieved with css alone. You will need some javascript. I would advise you to have a look at jquery.