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.
Related
I am not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
I am designing a component for a website which is one solid inline block. It currently looks fine on a normal sized screen but when the screen gets smaller things get weird. I have tried using a media query to change some of the CSS properties to get all the divs to fall in line vertically. This doesn't seem to be working.
Also, there is an extra 10px on the bottom of this block which I have tried to remove in numerous ways and it doesn't disappear unless I set the height a solid 300px on the larger outer div. Right now I am trying to use the calc function to remove it but with no luck. If someone knows the fix to that too it would be awesome.
Here is the current media query:
#media (max-width: 500px){
#orange-block-right, #orange-picture{
float: left;
display: inline;
}}
Here is the link to the jsfiddle which will demonstrate my woes. If anyone could let me know what the issue is I would be very appreciative.
First of all you need to reset your left margin and width in the media query:
#orange-block-right {
width: 100%;
margin-left: 0;
}
Similar for the other elements.
Apart from that, erase those float and inline properties, define all these elements as blocks and center their content.
I have 2 boxes (About Us and Contact Us) that don't change (stack) when you resize the browser. I've checked the forums and it looks like I need either a clear:both or overflow:hidden. My problem is, I've tried both of those anywhere I can think of and nothing happens.
So far, I've tried overflow in the wrapper, box1 and box2. As well as paragraphs 1-3. I've also tried clear in pretty much every spot around/in/under the wrapper div in my HTML.
When the browser reaches the 768px breakpoint, you need to change the div's display mode to block so that it doesn't allow any other item in its horizontal space.
#media (max-width: 768px) {
#box1 {
display: block;
width: 60%; /* Set according to your requirement */
}
}
Output:
JSbin
I have a layout that breaks at 500px using floats and inline-blocks to shift elements. But chrome(40) does not render them correctly after breaking from smaller to larger size.
Here's the initial mobile layout
Expected layout on resize
Incorrect result
The div containing edit/delete buttons is displayed inline-block and floated right, but does not stack along the 'tags'.
div.link-div div.edit-delete {
display: inline-block;
float: right;
background-color: #3498db;
}
Complete CSS JSFiddle.
My break point is between mobile rotations so the browser will resize. This works fine for FF, IE. Is something wrong in CSS? Please give some workaround.
Well, a way to solve the problem would be adding a "float: left;" to the anchor Tags, to make sure it doesn't occur. You can wrap them in a div and 'float' that div left in opposition to the "edit-delete" div.
Here is your JSFiddle edited. I created a class to the div called "tags-div", which, on MediaQuery is set to "float:left;" on screen sizes bigger than 500px.
#media screen and (min-width: 501px) {
.tags-div {
float: left;
}
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>