I am trying to group two buttons together.
I have a design that works on big screens, with two buttons floating to the right on the same line. However when resizing, there is one button that will get onto the text :
The requirements are :
the buttons are on the right of the text when the screen is big enough (works fine)
the buttons get on top of each other (instead of next to each other like in the screenshot) when the screen gets smaller. They also should have the same width in this case.
Sure, you just need to use media queries in CSS.
In your media query you can define min-width or max-width. Min-width lets you say that at x screen width and larger, follow this set of styles. Max-width is at x screen width and smaller. Best practice is to use min-width and style your site for smaller screens first and then apply more complex styles on top of that with media queries. However if you just need it for one element, it's okay to work down:
#media screen and (max-width: 768px) {
.button-container {
float: none;
display: block;
}
.button {
width: 200px;
display: block;
}
}
Related
I don't believe I'm grasping how to create a responsive website. this is my code:
body{
width: 100%;
font-size: 16px;
background-color: grey;
}
h1{
color:black;
}
p{
color:black;
}
#media only screen and(min-width:320px)and(max-width:420px){
h1{
color:red;
}
p{
color: white;
}
}
my goal with this small css edit was to see if I understood how the media query worked and to change the h1 and p element colors when a screen size is in-between mobile size.
however, regardless of what size the screen is, there is no changes the elements. I'm slightly confused because I've seen videos of people using this as an example.
You have the right order of things, normals rules first and then mobile rules afterwards.
Let's say you have two buttons on the screen for a desktop and a phone. Because a mobile phone obviously does not have the width to spare you may want to show the buttons above and below each other instead of side-by-side.
I have a phone with a horizontal screen width of 375px. If the buttons are rendered as 250px then they blatantly won't render side-by-side on my phone without clipping and therefore looking messy to visitors.
Take this code in to consideration:
input[type='button'] {display: inline-block; width: calc(50% - 8px);}
#media (max-width: 1024px)
{
input[type='button'] {width: calc(100% - 8px);}
}
The button input elements are set to use (roughly) 50% width (compensating a bit for border and margin). Since they are inherently display: inline; I'm using display: inline-block to keep them rendering on the same line (no line breaks for outright block rendering) though allow setting the width hence inline-block.
The media queries do not negate something like display unless it's explicitly defined, again so all the input buttons are still rendered as inline-block. But now on a mobile screen these buttons will use up enough space that they'll push each other to separate lines.
I am currently using Bootstrap v3.3.6 and jQuery v1.9.1. I have an application that will collapse a horizontal navbar once a certain screen resolution is reached. I like how this functionality works and would like to maintain the current screen resolution breakpoint. What I would like to do is also collapse the navbar when the navbar reaches a certain width. The application allows different users to have different roles which could add or remove items from the navbar dependent on the users' role.
Is there a way through CSS to collapse the navbar based on the width of the navbar? Is javascript the only option?
It does not seem possible without JavaScript. It's unclear exactly what you're trying to achieve, but you would have to use media queries in CSS to trigger events based on screen width, not individual element width.
This post: Can media queries resize based on a div element instead of the screen? covers the topic in question.
I would recommend looking at setting widths using em or vw. The latter will dynamically resize with viewport. You can then toggle display using media queries.
See: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
See: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
Using viewport width/height measures are great for font resizing but might also allow your menu width to "flow" with the resizing of your browser, then you add media query breakpoints to toggle display or set fixed values once you reach a minimum or maximum.
If you are just interested in hiding a horizontal menu bar (e.g. top nav bar) when screen gets a certain width, you can use your browser developer tools or Bootstrap documentation to identify the class name of the element, and then add additional CSS to hide the element.
Here is an example of what I'm doing on a responsive app in the works:
div.top-nav {
/* some attributes here */
}
div.bottom-nav.menu {
visibility: hidden;
}
#media only screen and (min-width: 730px) {
/* perhaps set fixed max values after screen gets beyond tablet so fonts do not get too big if resizable in huge resolution monitors */
}
#media only screen and (max-width: 991px) {
/* some fixes at some desired width as screen resizes */
}
#media only screen and (max-width: 730px) {
/* hide or change element properties for tablets */
}
#media only screen and (max-width: 500px) {
/* hide or change element properties for phones */
.top-nav-item {
display: none !important; /* hidden on phone and display bottom nav items instead below */
}
.logo {
max-height: 25px !important;
}
.avatar {
max-height: 20px !important;
max-width: 20px !important;
}
div.bottom-nav.menu {
visibility: visible;
}
div.item.bottom-nav {
font-size: 4vw;
}
}
I have a navigation bar, an example of which is available here: http://fiddle.jshell.net/4uq6y5fa.
This displays as expected when all the elements fit on the screen, but if I resize the window, bits of the menu start disappearing. How do I fix this?
Use CSS media queries:
#media only screen (//defined for particular width)
{
//code of nav bar and search box
}
e.g.
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Alternatively, you can define widths and heights in percentages(relatively), using em instead of pixels.
I don't really get what your point is, do you want to make the menu responsive or do you want to know what the problem is?
As for making it responsive, use media queries.
W3schools, The #media rule is used to define different style rules for different media types/devices.
So for example you make your width 100% for the screen size of 1920x1080 and 50% for the size of 1024x720. So your nav will "jump" to the 50% when someone resizes the website.
I have a page where my content looks great when shifted slightly to the left via the padding tag (%) in CSS. However, when I decrease the window size down to a more "mobile" size, the content (text) is still slightly to the left. I'd like it to be perfectly centered with a desired amount of padding, after a certain min-width occurs.
Use media queries to give the desired effect.
#media (max-width: 480px) {
div {
text-align: center;
padding: 5%;
}
}
I am trying to create fluid and flexible "tiles" for a website, that span across 100% of the viewport of the browser. However, I would like them to scale a bit if needed to eliminate all white space if a the next tile doesn't fit.
A normal div tag with a min-width & min-height of 200px, set to "display: inline-block" gets me most of the way. As I expand the browser window, the boxes will move up to the top line if there is room for another.
My problem is when there isn't room for the next div, there is whitespace on the right. Instead of that, I want each div to 'scale up' to fix the full width of the line.
So if the browser was set to 675px, instead of having 3 divs at 200px, there would be 3 at 225px. But if you then resize the browser to 800px, then there would be 4 divs of 200px.
Sorry if that is hard to understand. Essentially, I am trying to mimic how http://pulse.me displays their articles.
I would like to do this in pure CSS if at all possible, but I suspect for the window resize at least, some javascript will be needed. Any thoughts?
For a pure-CSS approach, you can use media queries combined with percentage widths:
.tile {
/* 4 tiles per row */
width: 25%;
}
#media (max-width: 500px) {
.tile {
/* 3 tiles per row */
width: 33.33333333332%
}
}
#media (max-width: 300px) {
.tile {
/* 2 tiles per row */
width: 50%
}
}
Here's a fiddle that demonstrates this: http://jsfiddle.net/bDBMP/1/