FireFox is blocking Twitter content

To view content on tw-rl, follow these steps...

  1. Click on the shield in the address bar.
  2. Toggle the switch at the top of the panel.
Sign In →
Sign In →
start
Read Thread
A quick beginner's guide to CSS Media Queries THREAD🧡
Media queries plays an important role in Responsive Web Design Though this is not the only use of it. Media queries can also be used as - Apply different styles for different media types - Orientation (landscape or portrait mode) - Resolution
In this thread, our point of focus will be using Media Query in order to make a web page responsive. Sounds interesting? Let's goπŸ‘‡
Let's start with the syntax first (See attached image) There are a lot of media features. Have a look at this table https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features
Let's see an example into action. So that we can build strong hold on the concept """ @ media screen and (min-width: 600px) { div { background: green; } } """ In this case the background will be green whenever the screen width is 600px of greater than 600px;
0:000:00
You can also combine two media features using "And", "Not" or "," For example: """ @ media screen and (min-width: 600px) and (max-width: 900px) { div { background: green; } } """ In this case, the background will be green between 600px to 900px width
0:000:00
You can try bunch of media features - any-hover - color - height - width - grid - aspect-ratio - orientation - resolution, etc...
We can also write the nested media queries: When min-width = 600px and user hover over element then solid black will create around div.
You can also invert the media query by simply adding the "not" keyword after @ media
Sometimes managing media queries might be a tough task. So whenever you're working on pure CSS, make sure to check some standard device viewports and try to minimize number of media queries in your code
I hope you get a quick overview of how media query works. The syntax of media query and stuff like that. Read this MDN article for more info https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

My Notes:

Select to add to your #gallery:
Pratham πŸ‘¨β€πŸ’»πŸš€

Pro Curator beta

$99 /year$4 /month*

*life-time BETA pricing. Don't miss out! Price will increase as features are added, but not for you!