How to use responsive features of bootstrap 2.0 - html

I'm using bootstrap 2.0 from twitter and unsure how to make it responsive.
How can I remove elements when in mobile/small screen mode?
How can I replace elements (i.e replace a big picture with a smaller one)?
Change a <h2> to be <h5>? etc.

Hiding Elements
You can hide elements with:
display: none;
visibility: hidden;
Hopefully you're using LESS or SASS so you can just specify:
#mixin hidden {
display: none;
visibility: hidden;
}
And then easily mix it in when necessary:
footer {
#include hidden;
}
Just apply them to any selector in the relevant media query. Also, understand that media queries cascade onto smaller media queries. If you hide an element in a wide media query (tablet sized), then the element will remain hidden as the website shrinks.
Replacing Images
Bootstrap doesn't offer image resizing as the screen shrinks, but you can manually change the dimensions of images with CSS in media queries.
But a particular solution I like is from this blog post: http://unstoppablerobotninja.com/entry/fluid-images/
/* You could instead use ".flexible" and give class="flexible" only to
images you want to have this property */
img {
max-width: 100%;
}
Now images will only appear in their full dimensions if they don't exceed their parent container, but they'll shrink fluidly as their parent element (like the <div> they're in) shrinks.
Here's a demo: http://unstoppablerobotninja.com/demos/resize/
To actually replace images, you could swap the background image with CSS. If .logo has background: url("logo.png");, then you can just specify a new background image in a media query with .logo { background: url("small-logo.png");
Change h2 to h5
If this is because you want to change the size of the heading, don't do this. H2 has semantic value: It's not as important as H1 and more important than H3.
Instead, just specify new sizes for your h1-h6 elements in media queries as your website gets smaller.
#media (max-width: 480px) {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 80%;
}
}

I've been playing with the responsive parts of bootstrap for the last few days, take a look at /less/responsive.less to get an idea of how you can utilize the responsive features of bootstrap.
You basically look at the browser's width/height to determine which css properties to apply to the page. So, for example if you want to change h2 when the user is using a smaller device, you would do something like this:
#media (max-width: 480px) {
h2 { font-size: 15px; }
}
You can do this with any style you want to affect when the size of the screen changes.
You can replace some elements by utilizing css replacement methods and then just have different styles affect things at different widths. Or you could use jquery or maybe response.js to do it. I'm still playing with this part of it.

For responsive images you could have
.responsive-image { max-width:100%; height:auto; }
and you could use this as
<img src="testimage.jpg" border="0" alt="blank image" class="responsive-image">
For responsive navigation
Use tinynav https://github.com/viljamis/TinyNav.js
This converts <ul> and <ol> navigation to a select box for small screens.

As to your first question - I'm not sure if this was available when you asked, but Bootstrap has classes "hidden-phone", "visible-desktop" etc to handle hiding of elements on different sized screens. Just add the .hidden-phone class to an element and it will disappear on screens smaller than 768px wide.
EDIT
After the release of bootstrap 3, the 2.3.2 documentation is now at:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
The new 3.x documentation is at:
http://getbootstrap.com/css/#responsive-utilities

I think bootstrap has built-in features for this (in responsive-utilities.less):
<a href="#">
<span class="visible-desktop">Click here to get more information</span>
<span class="visible-tablet">More information</span>
<span class="visible-phone">Info</span>
</a>

Related

Removing the margin From my Wordpress website

I have a Wordpress website installed "Quidus Theme" http://theme.socialflag.net/latest-free-wordpress-themes/.
There is a big unnecessary space from the right side which looks is very bad.
I want to remove this space and want my web pages to fit to the whole screen.
If there is something i can change in my CSS style please let me know.
One of my friend provided this code but I don't know what to do with this or where to put the code.
Note: I want all my posts to fit to full width not only the page link i provided.
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Undertake the following:
Override the max-width property in the layout to 100% (or if you'd like, you can look for the rule and remove it in your css
Set your div with id content to a width of 78%
click here for codepen
Change the css site-content in media screen and it will look like the attached image:
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Use the developer tools in your browser (i.e inspector in Chrome or firebug in Firefox) to see where the padding is coming from.
Either the padding is applied to something other than the body, or the padding is applied to the body but is still overriding your CSS. For example:
body.class {
padding: 20px;
}
Would override your CSS. or
body {
padding: 20px;
}
Declared after your CSS would still override.
I face same problem on my website http://calendarsnews.com/ But when I used this process after it solve my problm

Btn-group stacking upon window re-size (smaller)

I am making an angular app with HTML, and CSS and have a form with a button group (3 buttons horizontally lined). However, when I make the window smaller, the buttons stack on top of eacother.
It is a class="list-unstyled btn-group" within a class="form-group". How would I resize the buttons to keep them horizontal?
The buttons stack because the space required is more than space available. Hence, you need to make sure that in smaller windows, space available should be more than equal to space required
You can achieve this by following approaches.
Use media queries.
#media screen and (min-width:420px) and (max-width:770px) {
// Write your styles here - reduce padding, font-size, etc
}
For e.g. you have an element with class my-class and have font-size as 12px and in screen size from 420 to 770, want font-size as 10px. Then css will look
.my-class {
font-size : 12px;
}
#media screen and (min-width:420px) and (max-width:770px) {
.my-class {
font-size : 10px;
}
}
Use css frameworks like bootstrap - http://getbootstrap.com/
Use can also introduce javascript (if required)

Different layouts for different screen's width

I am working on a webpage, and I want to use JavaScript to center some text (contained in a "p" with the display:inline-block attribute) when the text is shifted under everything else (on a smaller window). When the window size is big enough, I have the text on the right of the screen (where I want it for larger windows).
Basically, I have content on the left and right of the screen for bigger windows, but I want that content to become centered and vertical when the browser is smaller.
I've tried using .addEventListener() but my JavaScript knowledge is pretty limited.
Any thoughts? Does this make sense?
I see you're trying to do some sort of responsive design. You're better off doing this without any javascript.
You should look into Css Media Queries, that are meant to set specific css styles depending on the screen size:
#media screen and (max-width: 500px) {
Similar to your scenario, here's a sample showing the concept: http://jsfiddle.net/xkJ3G/
Resize the window and test it!
You can achieve desired effect using only HTML and CSS.
JSFiddle
HTML
<div class="outer">
<div class="A">A</div>
<div class="B">B</div>
</div>
CSS
div.outer {
width: 100%;
text-align: center;
}
div.A,
div.B {
width: 40%;
min-width: 250px;
display: inline-block;
}
Linebreak will be when width is lesser than min-width (in this example when 40% < 250px)

How to fix text with limited height and absolute position overflows

I did this neat heading for a website using Bootstrap and some CSS tricks : http://www.bootply.com/QH5olSGxDU
But when using a smartphone with small width (such as an iPhone), the text overflows as shown here : http://imgur.com/k6JaKbi
Have you any idea how to prevent this (idealy by cropping the title like "Some Stuff #6 - Lorem...")? I tried the CSS property text-overflow, but it doesn't work.
You could use media queries to reduce the font size of the <h2> when the screen size is smaller than a certain size.
#media (max-width: 400px){
div.header-image-single h2 { font-size: 16px; }
}
Alternatively, you could use javascript to check the window size and if it is smaller than a certain value trim certain tags to a set number of characters.
var str = originalString.substring(0, X); //original string comes directly from the content of the <h2>, the 0 is the starting position and the X is the number of characters you want to keep
here is a JSFiddle that shows this alternative in action (I utilized jQuery to make the selection/manipulation of elements easy, but it would be done with plain JS too)
What about
h2 {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 300px; (I've used this to test without a mobile device)
}
?
You could only apply white-space: nowrap; in your mobile css if desired.
Beside adjusting the font size of the text you can also add simple min-height to the image.
.header-image img {min-height: 275px;width: 100%;}

Horizontal to vertical menu, on browser window resize

Say I have the following list in html:
<ul>
<li>Program</li>
<li>Platser</li>
<li>System</li>
</ul>
Which is styled as follows:
li
{
float: left;
padding: 10px;
}
This looks something like this:
When I resize the browser window, and the border touches the edge of the last li, this element jumps down as expected:
Though, the desired behavior I am after would be like this:
When the last element is touched by the browser border, the whole menu becomes vertical. My question is how to do this with CSS?
You need to look into CSS3 media queries/responsive web design. Tons of results on google and on SO, but here's one.
#media screen and (max-width: 200px) {
// do something here, change the behavior of your list
}
You could CSS3 media queries to remove the float:left when the width of the screen is small enough.
https://developer.mozilla.org/en/CSS/Media_queries
you can set the width or min-width attribute in CSS for the ul element to prevent it to be cropped if you resize the page
Use CSS3 media query and specify different css rules for different width of the browser window.