Answers for "how to add @media in css"

media rule css

@media only screen and (min-width: 1000px) {
  /* place here CSS for when the screen is more than 1000px wide */
  .card {
    width: 50%;
  }
}

how to display media in html

###                         How to display Media with html                         ###
_______________________________________________________________________________________






_________________________________________________________________________________________

###                         Image(s)                         ###


### You can easily add a img with this line of code :
<img src="Type here the location of your picture" />

### But you can also add a style to it like this :
<img src="Type here the location of your picture" class="type here the name of your style" />

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 


### If you want to keep it easy and not add a style you can also add details in the command itself
### like this :
<img src="Type here the location of your picture" width="type here a amount of pixels" />

### if you really want to customize it than i would recommend using a style



## Here is an example i made:
<img src="src/picture_beach.jpg" class="pictures" />

________________________________________________________________________________________

###                         Video(s)                         ###


### adding video(s) is somewhat more complicated than adding image(s) here is the basic way :
<video controls>

    <source src="Type here the location of your video" />
</video>

### To video(s) you can also add a style like this :
<video controls class="Type here the name of Your style">

    <source src="Type here the location of your video" />
</video>

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 



### you can also customize the video without using a style easily
<video controls autoplay poster="Type here the location of a picture for a thumbnail if you don't want one than don't put poster here">
    
    <source src="Type here the location of your video" />
</video>

### If you want to autoplay the video than type autoplay where i put it. If you don't want autoplay just don't put it there



## Here is an example i made:
<video controls autoplay poster="/img/beach.png">
    
    <source src="/video/sea.mp4" />
</video>

_______________________________________________________________________________________

###                         Audio(s)                         ###


### Adding a audio file is almost the same as adding a video file here is the basic code line :
<audio controls >

    <source src="Type here the location of your audio" />
</audio>

### just like adding a style to video(s) its done like this :
<audio controls  class="The name of your style" >

    <source src="The location of your audio" />
</audio>

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 



### You can customize the audio if you don't want to use a style very easy
<audio controls autoplay loop preload="" >

    <source src="The location of your audio" />
</audio>

### "autoplay" = It will play automaticly when you go to the html page
### "loop"     = If you add this the file will never stop playing. when it ends it will start over again
### "preload"  = You have 3 types of preloading. 1="auto" It will automaticly load. 2="metadata" It will load before the metadata. 3="none" It will just load 
### like it normaly does

### You can also add above or under the line <source> the words: "Your Browser does Not support This music File. Please Try another browser"
### You just have to add the text nothing else and it will display when the audio file can't load. 



## here is an example i made:
<audio controls autoplay loop preload="metadata" >
    <source src="/audio/audiofile3904.mp3" />
    Your Browser does Not support This music File. Please Try another Browser
</audio>

_______________________________________________________________________________________

# If this code helped you please leave a like on it. If you want to see more of this follow me
# Or just take a look at another answer of my answers
#
# THIS CODE HAS BEEN MADE BY : Vast Vicuña