Ok so today I said hey, let's learn us some Responsive Web Design Techniques. So far so good I suppose ;)
#media screen and (min-width: 768px) {
#avacweb_chat{
height: 70%;
width: 600px;
}
}
#media screen and(min-width:600px) {
#avacweb_chat{
height: 70%;
width: 540px;
}
}
#media screen and(min-width:480px) {
#avacweb_chat{
height: 500px;
width: 320px;
}
#chatbox_members{
display:none;
}
}
#media screen and(min-width:320px) {
#avacweb_chat{
height: 360px;
width: 220px;
}
#chatbox_members{
display:none;
}
}
I wanted to ask a few question to some of my great S.O. members, so I see the media query is focused on screen is there anyway to do this
#media #avacweb_chat and (min-width: 500px) {
}
Or are we only allowed to focus on screen size? Also are we allowed to use transitions and transform in these media queries? (I know IE won't support). these are the only two questions I have.
Focusing on size of another element besides Screen
Adding CSS3 to the queries.
Also are we allowed to use transitions and transform in these media queries?
Yes, for sure. Simply include them as you normally would
is there anyway to do this
#media #avacweb_chat and (min-width: 500px) {
}
Not sure what you are getting at here. If your goal here is to cusomise the avacweb_chat div for viewports above 500px, use
#media (min-width: 500px) {
#avacweb_chat{
/* some styles here */
}
}
If you are just getting your feet wet with responsive design, have you considered some of the options like Bootstrap or Foundation or one of the many other good choices. They aren't necessarily for everyone, but they'll get you off to a fast start.
Have fun with RWD!
Related
I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
I have two (actually three) #media sections in my CSS. From my experience I hoped that one will override each other because it comes later in the CSS file. However this is not the case (on multiple browsers). What am I doing wrong?
HTML:
<div id="experts-partition-1"></div>
CSS:
#media (min-width: 410px) {
#experts-partition-1 {
clear: both;
}
}
#media (min-width: 970px) {
#experts-partition-1 {
width: 0px;
float: right;
}
}
The browser applies the rules for experts-partition-1 of the first section (min-width: 410px) and not of the second section (min-width: 970px). What might be the reason?
Your code is working, but the condition is, you have to go above 970px to work #media (min-width: 970px) or you can try max-width instead of min-width and sequence should be like this
#media (max-width: 970px) {
#experts-partition-1 {
width: 0px;
float: right;
}
}
#media (max-width: 410px) {
#experts-partition-1 {
clear: both;
}
}
The reason behind using this sequence is the nature of css. It works from top to bottom. Hope it helps
You are using Mobile First Approach to design webpage. You have specified a ruleset in this media query
#media (min-width: 410px) {
/* this means rules are applied when the screen size is min 410px and also above that */
}
Mostly in web development there are two approaches
1. Mobile First
2. Desktop First
Choose one based on the requirement and proceed with it. For better understanding checkout this link about Mobile First vs Desktop First Approach
I would like to change the following two style settings in the #media class. I am failing to find the right classes. The subclasses .col-md change their numbering throughout the document.
I am a CSS noob and have never dealt with a #media class so far (is it even a 'class' because of the # tag?).
I searched the site but I am quite lost since I do not really know how to formulate my problem.
What is the correct way to set margin-left: 10% and width: 80%?
#media (min-width: 992px)
.col-md-offset-3 {
margin-left: 25%;
}
#media (min-width: 992px)
.col-md-6 {
width: 50%;
}
EDIT based on comment:
If what you want is to impact all .col-md disregarding numbers, you can use an attribute selector:
#media (min-width: 992px) {
[class*='col-md'] {
margin-left: 10%;
width: 80%;
}
}
Otherwise, if you wish to impact only the classes .col-md-6 & .col-md-offset-3 as you have included you can do:
#media (min-width: 992px) {
.col-md-offset-3 {
margin-left: 10%;
}
.col-md-6 {
width: 80%;
}
}
This means, that the styles applied inside the #media query, will only work on media viewports with a minimum width of 992px and above.
Make sure you set these at the end of your custom stylesheet which should be loaded after bootstrap styles.
You can find more info on #media querys here.
See if this works for you:
#media (min-width: 992px) {
.col-md-offset-3 {
margin-left: 10%;
}
.col-md-6 {
width: 80%;
}
}
#media is called a media query. The CSS which needs to be applied when the condition is met all goes between curly braces following the condition.
Use col-sm for scrren size between >=768px and <992px.
For eg.,
<div class="col-md-8 col-sm-10 col-md-offset-2 col-sm-offset-1"></div>
In the above eg col-md-* will only affect when the screen size is >=992px and <1200, col-sm-* when >=768 and <992. For more info.
Regarding media query, It's like a break point.
For eg.,
p { font-size: 16px; }
#media screen and (max-width: 480px) {
p { font-size: 12px; }
}
In the above example, p tag will have font-size of 12px only on screen size less than 480px. On all other devices it will have font-size of 16px. For more info.
I am creating a responsive design for my site and I have read quite a bit on media queries and breakpoints. I understand that there is no set breakpoints since there are so many screens now-a-days and we need to choose the best that suits our layout. But what I am not sure is if its okay to have different breakpoints for each element styled separately or is it better to group all the css to a common breakpoint that I use in my entire site. Here is an example to explain what I mean by this:
Right now I do something like this:
Method 1:
.search_bar {
width: 30%;
float: right;
}
/* Media Queries for Search Bar */
#media only screen and (max-width: 900px) {
.search_bar {
width: 40%;
}
}
#media only screen and (max-width: 780px) {
.search_bar {
width: 50%;
}
}
#media only screen and (max-width: 500px) {
.search_bar {
width: 100%;
}
}
.side_bar_wrap {
width: 300px;
}
/* Media Queries for Side Bar */
#media only screen and (max-width: 850px) {
.side_bar_wrap {
width: 250px;
}
}
#media only screen and (max-width: 600px) {
.side_bar_wrap {
width: 150px;
}
}
#media only screen and (max-width: 400px) {
.side_bar_wrap {
display:none;
}
}
etc..etc..
If you noticed above, I do not have a set number of breakpoints for my entire template. I defined different breakpoints for each element based on how that individual elements behave in different screen sizes. This gives me an accurate way to align individual elements rather than defining all the elements in a common breakpoints. What I dont know is if the above method is recommended (or okay to use) or should I not do it like that? Do I need to change the above into something like this where I create common breakpoints for my entire website and add the styles grouped together into one of these common breakpoints? Something like:
Method 2:
.search_bar {
width: 30%;
float: right;
}
.side_bar_wrap {
width: 300px;
}
/* Common Breakpoints to my entire site */
/* Media Queries for all elements are grouped into one of these */
#media only screen and (max-width: 900px) {
.side_bar_wrap {
width: 250px;
}
.search_bar {
width: 40%;
}
}
#media only screen and (max-width: 750px) {
.side_bar_wrap {
width: 150px;
}
.search_bar {
width: 50%;
}
}
#media only screen and (max-width: 500px) {
.side_bar_wrap {
display:none;
}
.search_bar {
width: 100%;
}
}
Is my first method a valid practice or I shouldn't be doing it like that? Can someone advise me if I am doing it right or wrong plz?
You are looking for best practice and solutions for questions like that are often based primarily on opinions. I'll try to give an objective answer, though.
In my opinion the most maintainable variant would be to go with method 2, i.e. keep media selectors to minimum:
It easily allows to split CSS for different media devices to separate files.
You have better outlook at what needs to be customized across different layouts: instead of scattering it, you keep it in one place.
It makes CSS output code smaller, implying negligibly faster loading times.
Cons are that you scatter semantically coupled definitions, i.e. in this example rules for #menu get scattered all over the place:
#menu { base rules ... }
other base selectors and rules ...
#media only screen and (max-width: 500px) { #menu { custom rules 1 } }
#media only screen and (max-width: 700px) { #menu { custom rules 2 } }
One solution to that would be giving up on trying to define base rules and define everything that needs to be customized in media selectors. That's not very good approach since you easily break Don't Repeat Yourself principle. Another, better approach would be to introduce base containers, like #menu-container which has constant base rules, and then #menu "implementation" which has rules defined exclusively in #media selectors.
Anyway, the point is not to mix base rules with device-specific rules, since it creates confusion when reading and modifying the code. (An exception to that are rules that define default layout on all devices; I'd keep these near device-specific rules.)
I need to set a height on a div and i would like to set it relative to the device screen.
For ie :
/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }
/*Small devices Tablets (≥768px)*/
.myClass { height: 400px; }
/*Medium devices Desktops (≥992px)*/
.myClass { height: 600px; }
/*Large devices Desktops (≥1200px)*/
.myClass { height: 800px; }
Edit: Improved example at CodePen.
I would add to it from a bit different angle. Often times you might need to perform different operations in JS depending on your breakpoint. For that purpose I often use:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
These 4 divs allow you check for currently active breakpoint. For an easy JS detection, you can have a set of 4 functions like this one :
function isMobile() {
return $('.device-xs').is(':visible');
}
Your question lacks enough detail for me to help you better, but in case what you need can't be achieved by simply defining different properties of an element in a different media query, you could assign certain class, at any point, by:
if( isMobile() ) {
$('.someClass').css('property', 'value');
}
#media screen and (max-width: 768px){
.myClass{
height:200px;
}
}
Generally with responsive webpages you just let content resize itself and just make divs the same height as eachother when they are on the same row. I assume you are using bootstrap as they have the same breakpoints. However I don't know the exact problem you are trying to solve so:
This mobile first approach by not adding media query for the smallest breakpoint as it is the default anyway. This will deal with infinitely large screen by setting height to 800px.
.myClass {
height: 200px; /*default extra small*/
#media (min-width: 768px) /*small*/
{
height: 400px;
}
#media (min-width: 992px) /*medium*/
{
height: 600px;
}
#media (min-width: 1200px) /*large*/
{
height: 800px;
}
Look at media queries.
#media (max-width: 768px) {
.myClass {
display: none;
}
}
#media (max-width: 992px) {
.myClass{
display: none;
}
}
#media (max-width: 1200px) {
.myClass{
display: block;
}
}
Use the viewport width and height after declaring the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
you can set .myClass height as a percentage of the viewport height and get rid of the media queries, like this:
.myClass { height: 30vh; }
You'll also need to define default class, for example screen size - greater than 1200px
/*Extra small devices Phones (<768px)*/
#media only screen and (min-width:768px){
.myClass { height: 200px; }
}
/*Small devices Tablets (≥768px)*/
#media only screen and (max-width:768px){
.myClass { height: 400px; }
}
/*Medium devices Desktops (≥992px)*/
#media only screen and (max-width:992px){
.myClass { height: 600px; }
}
/*Large devices Desktops (≥1200px)*/
#media only screen and (max-width:1200px){
.myClass { height: 800px; }
}