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

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)

Related

Layouts changing drastically in mobile view

I have This site
It looks okay in normal browser from PC.
But whenever I switch to mobile view from inspect, it looks like this
http://azlily.bex.jp/eccube_1/html/
2: https://i.stack.imgur.com/uSHAe.png
Should I implement Media screen indivisually for all components in website? If Yes, then Why is title and some components are fit in mobile view.
You dont need to implement media screen for every item present. the trick is to make it responsive from the ground up, and then just make small alterations to the layout as it shrinks down if still needed. For example, take this news_area div section. You have it positioned in the center of its parent container - news_contents. But dont use fixed margins to center it, you want add css so that it stays in the center even when it shrinks down.
example:
.news_contents {
width: 100%;
margin: 0;
padding: 0;
}
#news_area {
width: 90%;
background: #d9d9d9;
margin: 30px auto!important;
}
[note:the !important tag is only needed here to override some of your existing css. Also this is just a rough example to show you the layout.]
With this added to your css, the news_area will always be centered in its parent div, and always have space either side. This is what i mean by coding it with a responsive design from the start. This section now doesn't need media screen to alter it again as it works on all device sizes with its original css.

Making the one link style appear the same under two different div widths

I have taken an anchor tag and styled it to look like a typical button (hardcore stuff!! Lol!), but when I use this button inside a div that's 75% wide and I do the same but inside a div that's 20% wide; both buttons sharing the same style don't look the same as one another?
I understand that this is because the padding on my button style is based on the width of its parent and that's why they both look different.
So without creating a new version of my button class every time there's a new width; how can I get around this and make both buttons look the same regardless of parent width?
Please see my js fiddle link for how I've coded this issue so far
https://jsfiddle.net/samuelcrockford/m94myv69/#&togetherjs=bk5j85kNr3
Thank you for your time
"how can I make both buttons look the same regardless of parent width? "
Would it be a problem to define the button width in pixel (px) instead of percent (%) ?
EDIT :
From the comment, here is a way to define a button size in different container.
.wide .button {width:20%;}
.small .button {width:50%;}
Do not use % in your padding, instead use px to determine the desired padding on buttons output.
Note: Padding will use the space 'minus' the size of the container base on your rule.
Here's the sample:
.button {
background-color: #333333;
color: #ffffff;
padding: 6px 12px; // from 10% 5%
/* over kill just for example */
}
https://jsfiddle.net/imarkdesigns/m94myv69/1/

Bootstrap 100% width / Full width

I want to create a new website with Bootstrap and I need it to be 100% in width, but I do not want it to be fluid. At least not for now.
The issue I have is: using bootstrap standard limits you to 960px and with a fluid layout it is full width but behaves like a fluid layout should by moving elements to become stacked when the window is shrunk in size.
Is there a way to have 100% width with a static bootstrap layout?
This is easy to achieve in Bootstrap 3, just replace the .container div with your own:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Thanks to Erik Flowers for the heads-up:
http://www.helloerik.com/bootstrap-3-grid-introduction#fluid
UPDATE
Bootstrap 3 now offers a built-in fluid container class, just use <div class="container-fluid">. See docs.
100% width ... static
This is a bit of an oxymoron. A 100% width layout isn't static.
Bootstrap uses a .container class to set a predefined width. Increase this to your desired page width if you want it to be greater than it's default. Be careful though that the sizing of Bootstrap's span* and offset* classes will need their widths adjusted accordingly.
Just don't include the bootstrap-responsive.css in order to disable the responsive function.
If you don't want a .container gutter/margin you can put your content outside the container but keep in mind you must maintain your content layout by yourself(still can use grid but lost an ability to centering your content) and don't forget most of the Bootstrap component like .navbar need .container to control its width.
One of my work need a full screen carousel to holding all contents so I wrap my content with .container to center the content.
I can't quite figure out how to reply to the main question, but here's what you want OP
As said above, don't use .container, use your own class like:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Then when you build your grid, just use col-xs-* for the columns. You will now have a 100% width site that doesn't stack in the "mobile" view. Welcome to the 90's ;)
I guess what you mean is you don't want margin/padding on the sides. (that's the only way your message makes sense - a 100% width will take the full size of the screen so it will never be static - the size will change depending on how big the window is)
We don't have a use-case or JSFiddle from you so I can't give you exact code but you need to make sure your body has margin:0 and padding:0 and then look for the other divs with Firebug or Chrome Web Dev tools.
If you want your layout to be fluid but stop at a certain point growing, then you need to apply max-width:1000px (for example) to your body or your general container/wrapper element.

How to use responsive features of bootstrap 2.0

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>

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.