CODEWITHSUNDEEP
cssresponsive-designmedia-queries
EasyBB
EasyBB

Reputation: 6574

Responsive WebDesign Questions

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.

Upvotes: 0

Views: 149

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

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!

Upvotes: 1

Related Questions