I'm sorry if this is a simple question, but this is my first time using bootstrap. I'm having an issue with the way my site appears in mobile devices when they are horizontal. There is a huge amount of space on the either side of one section. Please see the picture:
This only seems to be an issue between the sizes of 320 and 768. Anything smaller and the space is gone, anything larger and it appears in one line. I would really appreciate any direction as I'm not sure which section I would need to change in order to even get started messing with things.
Please read about Twitter's Boostrap's grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Every row (class row-fluid) contains 12 columns. Below 768 pixels screen width colums stack.
You can use the span* classes to split your blocks of colums.
Example:
<div class="container" id="firstrow">
<div class="row-fluid">
<div class="span6">Content 1</div>
<div class="span6">Content 2</div>
</div>
</div>
Above 767 pixels Content 1 en Content 2 will show next to each other. Below the 768 pixels they will show under each other (stacked).
If you don't want the columns stack between 320px and 768px you could use media queries. With the example code above:
#media (min-width: 320px) and (max-width: 767px)
{
/* Styles */
#firstrow div.span6{ display: block; float: left; width:48.9362%;}
}
When using Twitter's Bootstrap 3.x
Twitter's Bootstrap 3 got a small 12 columns grid too. You could use a special col-small-span-* class for this. Also mention
the span* classe are renamed to col-span-*:
<div class="col-span-4 col-small-span-6">
See: Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
To set the stacking point at 480px you will have to recompile yours css. Set #screen-small to 480px; and define your cols with: after that. Note this will change #grid-float-breakpoint also cause it is defined as #grid-float-breakpoint: #screen-tablet;.
see also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/
Related
I'm a bit confused about something that is hopefully quite simple, I'm extremely new to tailwind CSS, and even after looking into documentation I was not able to find the solution myself.
I have an image that I want visible for larger screen sizes, but hidden for smaller screen sizes.
I tried adding "sm:hidden relative" classNames to an img tag, I expected it to set the img to hidden on devices smaller than 768px.
The Opposite of what I want happens, the img shows on all devices up to 768px, but none bigger
Here is the section of my tailwind.config.cjs with media query overrides;
screens: {
xs: "480px",
ss: "620px",
sm: "768px",
md: "1060px",
lg: "1200px",
xl: "1700px",
},
My Img tag is as follows;
<img src={astronaught} alt="hero-astronaught" className=" z-[5] w-[100%] h-[100%] sm:hidden relative" />
If I only have relative, without the sm:hidden, as expected, the img shows on all devices, if I add the above code, it shows on smaller devices, but not devices larger than 768px, I am extremely confused.
I thought that the way it works logically with sm:hidden relative was "on sm devices, it is hidden, otherwise, it is relative"
Inspecting via console shows that the media query is being applied as follows in full-screen mode;
#media (min-width: 768px)
<style>
.sm\:hidden {
display: none;
}
Inspecting via console during responsive mode for a mobile device, shows no media query at all being applied.
An important thing to note is that I have used these media queries throughout the website and they work fine for padding and margins etc.
Any help would be appreciated, Thanks
Edit: If switching around the order, e.g. hidden sm:visible - then the image does not show on any device. If I inspect the class, it shows that the visible tag is applying, but so is the .hidden class, setting display to none
The way that tailwind media queries work, is that e.g. doing sm:hidden says "for all screens equal or greater than sm: use hidden". So if you do lg:hidden, it counts for both lg and xl and larger, while sm counts for all sizes from sm and up.
If you want to achieve what you're describing, I'd simply do the opposite:
hidden sm:block.
This will make it show from 768px and up.
I managed to find the solution, if I switched the classes to invisible sm:visible, then it worked correctly, but I want hidden, not invisible, as they work a bit differently, and so I realised that the issue was with having relative as my "opposite" to hidden. the new classes go as follows sm:block hidden - Thanks to Sebastion for helping me to properly understand media queries in tailwind!
There are 2 pages, that some part of the code is repeated, to this part of code, I apply this CSS:
#media (max-width: 767px) {
.sliderContent {
width: 100%;
}
}
When I check one page on an iPhone, it loads this CSS, but the other does not use this style.
I have added an alert with the screen size in both pages, and both have the same width.
Do you know where the max-width is taken? that could be making the difference between the two pages?
Can the HTML somehow affect the size of the min-width?
Max width is the width of the viewport in css pixels. What that declaration is saying is that when the viewport is less than 767px width, apply the .sliderContent style.
The reason it applys to the iPhone is that the reported width is less than 767px. If you were to open the page in question in a newer browser (IE9+, Chrome, Firefox, etc), and resize the window below 767px you'll see the same result.
https://hacks.mozilla.org/2013/09/css-length-explained/
Using Twitter BS3 for the first time and I am trying to achieve 3 equal columns on all viewports larger than 320px wide (iPhone, lets say). On a viewport of 320 and less I want my columns to stack vertically.
Looking at the grid system in the docs, I can see that I can set the flow of the grid system by using the following classes
Max container width None (auto) 728px 940px 1170px
Class prefix .col- .col-sm- .col-lg-
The problem with the above seems to be that you can only control the layout of the columns on anything above 728 pixels. But what if I want 3 equal columns side by side on anything above 320 and not their predefined 728 pixels?
A good example of what I am looking for can be found on the Jetstrap homepage.
The three blue circles retain the side by side layout until you are on a 320 px wide viewport.
My version of this starts to stack vertically at around 728 pixels.
You could use a #media query to override how Bootstrap normally handles the "tiny" grid .col-4..
3 columns HTML..
<div class="row">
<div class="col-sm-4 col-4"></div>
<div class="col-sm-4 col-4"></div>
<div class="col-sm-4 col-4"></div>
</div>
CSS media query for less than 320px to change .col-4 to 100% width..
#media (max-width: 320px) {
.col-4 {
width:100%;
}
}
Demo: http://bootply.com/73952
The question https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button by #twilight-pony-inc has been closed.
I think the question should be: Can i build a mobile app with Twitter's Bootstrap which looks like a native app. Or more specific how to build a navbar with a tittle and buttons on the right and left.
Example:
The blue header (navbar) with title "Temp" and buttons "back" and "home" should be build with Twitter's Bootstrap.
Interesting question. What #twilight-pony-inc is asking seems trivial but is not. Twitter's Bootstrap is build with a 'responsive' mind. The layout build with TB will adopt to the device which shows it. The example you give seems to build with a mobile frame work like jQuery Mobile. Mobile frameworks can be use to build mobile apps (only).
Nowadays mobile frameworks become more responisve and the coming version of Twitter's Bootstrap uses a mobile first approach. Twitter's Bootstrap 3 will have a mobile grid also. (see also http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html and http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)
Consider if you need a mobile framework in stead of Twitter's Bootstrap first. Second consider to use Twitter's Bootstrap 3 cause it will make your mobile development easier.
Offcourse you can build such a layout with twitter boostrap too. Read about the grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Start with row for your navbar and split it in columns:
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Also consider the fluid grid here: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
This will give you a navbar with two button. But on a small / mobile screen (below 768 px) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get a 100% width). You can use media queries to fix this:
#media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
This will create a row with three columns on small screens too. See: http://www.bootply.com/66054 or the image below:
The CSS make the mobile layout fluid cause the colums width is set by percentage (100% in a row).
Twitter's Bootstrap 3
TB3 has a fluid layout by default. TB3 has two grid the big grid for 768+ pixels width screens and a small mobile grid. Cause you can use the mobile grid, you don't need media queries to get a layout as above with TB3. In TB3 the width of columns is set by the col-span-{X} classes. Likewise for the small grid col-small-span-{X} are used to set the width.
So with Twitter's Bootstrap 3 you can build your navbar with:
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
For this reason you should use the “.col-” prefixes for your mobile app:
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>
See: http://bootply.com/73382
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/