How to Apply Media Query's to all Elements in CSS

So, I am building my website and came to realize that it is not suited to be viewed on mobile phones and tablets. I used 'id=" " on many of my stuff with a few class=" ". My question is how do I add media query’s to all of my elements in CSS that I gave id’s to or assigned classes to? Examples are below from my coding.

Thank you

<!DOCTYPE html5>
<link rel="stylesheet" href="CSS\StyleSheet.css">
    All for the Labrador Retriever
<h1 id=image-title>This is My Chocolate Lab, Her Name is Zoe!</h1>
<img id="Zoe" src="Images\Zoe.jpg"
  alt="Dog laying on her back with her tongue hanging out while smiling">
<p id=zoe-pic-text>(This is Zoe laying on her back and enjoying herself, this is her nightly and sometimes daily routine!)</p>
<p>As you can see in the above picture, Zoe my chocolate lab is laying on her back enjoying herself. This is her daily routine,
  but mostly at night. My family has always emphasized adopting pets who have no home. Therefore, we went out for a few weeks
  looking for a dog from the pound to adopt and we ran into Zoe.Her owners before her lost their home and was living out of their
  car with the dog. Being unable to feed her they gave her up to the animal shelter, we were lucky enough to have visited in that
  point of time to get her. She has been nothing short of the best dog that I have ever had!
<h1 class="headings">What do most people say about a Chocolate Lab?</h1>
<img id="ZoeTongue2" src="Images\ZoeTongueHangingOut2.jpg"
<p>Throughout my life I have often heard people constantly say that if you don’t know what type of dog to get for your family then,
  ‘get a lab’. I never understood why people talked so highly of them until I had one of my own and with good reason. They have a
  reputation for being great with kids, obedient, trainable (very smart), healthy, unique personalities (each one is a little
  different), and great for the outdoors!
<h1 class="headings">Dog breeds - The history of Labrador Retriever’s</h1>
<img id="ZoeWithBigBone" src="Images\ZoeWithBigBone.jpg"
    alt="Dog Standing with enormous bone sticking out of her mouth">
<p>There are many different takes on where a Labrador retriever has come from, it is said that they originally originated from
  Newfoundland in the 1500’s. Golden Labrador’s and chocolate Labrador Retrievers used them primarily for to jump into the icy
  water to bring back fish that got off the fishing hook. Imagine that! If you ever wondered why your lab is obsessed with fetching
  balls it was because they were originally bred to fetch fish in the water!

  Apart from fishing they also were primarily used for shooting sports and recognized by the greatest sportsman in that era who hunted
  for wild game, primarily because of a labs amazing work ethic in day to day life, specifically for farmers. As time went on lab’s
  became more and more notorious as one if not the ultimate game dogs for those who enjoy the outdoors.
<h1  class="headings">Why Lab’s make such good pets</h1>
  <div class=ThreePics>
<img src="Images\TheoSleepingWithZoe2.jpg" alt="A Toddler Cuddling With a Lab">
<img src="Images\ZoeLayingWithHope.jpg"    alt="A Toddler Cuddling With a Lab">
<img src="Images\TheoLayingWithZoe.jpg"    alt="A Toddler Cuddling With a Lab">
<p>Out of all the dog breeds golden labs and chocolate labs rank as one of the best family dogs to have, specifically for those with
  children. According to the <a href="">'American Kennel Club'</a> Labrador Retrievers ranked as the Number
  #1 dog from 2013 all the way to 2017. The reason being is because they are considered extremely friendly and considered a
  ‘companion’ dog. They are known to create bonds with the entire family (especially kids) and get along extremely well with other
  dogs. My dog Zoe for example tries to play with just about every dog she meets! She absolutely loves to play with other dogs every
  chance she gets!
<h1 class="headings">Labrador Retriever’s are an excellent pet for young kids</h1>
<video id=William_VS_Lab_Playing_Fetch width="500" height="500" controls>
    <source src="Videos\William_VS_Lab_Playing_Fetch.mp4" type="mp4">
    <source src="Videos\William_VS_Lab_Playing_Fetch.mp4" type="video/ogg">
    alt="Dog running from a kid with a frisbee in her mouth">
<p>For individuals who are out-going, Labrador retrievers are extremely active and require lots of exercise and playtime. They are
    known to help wear out your kids and remain extremely active throughout most of the day. They are extremely inquisitive and try to
    be a part of whatever you do!
  	For those with young kids such as newborn or toddlers, labs have an inner instinct to be extremely gentle and protective of the young.
    When I wrestle with my son or daughter, my dog has been known to jump in front of them in order to ‘protect them’. When this
    happens, I start to wrestle with my dog instead of my son, he loves to watch me wrestle with my dog!
<h1 class="headings">Who should and should not have a Labrador retriever?</h1>
<img id="ZoeLickingTheo" src="Images\ZoeLickingTheo.jpg"
    alt="Zoe (My lab) Playfulling Licking a Kid">
<p>Individuals who are not active and want a dog who just lays around the house and is ok with not going outside should never own a lab.
    These dogs require high amounts of physical and mental exercise in playing games, chasing your kids, and/or playing with other dog breeds.
    Not exercising your lab in my opinion would be considered a type of dog abuse.

    They are more suited for individuals who are outgoing and active, specifically those who enjoy the outdoors. However, if you are not the
    type of person who likes to go into the mountains all the time just taking your dog to the dog park at least every other day (preferably
    every day) is good enough. Having a fenced yard with a doggy door is always extremely beneficial and having kids who enjoy playing with your
    lab is an extremely good choice for having this type of dog breed.
<h1 class="headings">How to keep your Chocolate or Golden lab healthy, take them to a dog park regularly (Add pic Below)!</h1>
<p>Most cities nowadays have a dog park where you can unleash your dog and let them play. Many dog breeds require an individual to train
    their dogs to ‘get along’ with other breeds. However, for chocolate Labradors and golden Labrador’s this is not the case. From the get-go
    they will get excited and anxious to run circles around another breed and playfully wrestle. Exercise is by far the most important variable
    in keeping your lab healthy. However, feeding your dog a high quality dog food such as <a href="">
    Taste of the Wild</a> for example will go a long ways in keeping your dog healthy.
<p>however, among diverse dog dog breeds which includes labs because of how they are bred nowadays may require you to test out a few different types
    of animal foods to ensure the right composition for their genetic make-up. My dog Zoe was on the <a href="">
    ‘Taste of the Wild’</a> dog food which from my experience from selling dog-food for a period of time at a local farming store was hands down the highest
     quality food that one could get. However, it was not the best for my dog. Zoe became sluggish and started having health issues such as dog diarrhea,
     and dog constipation, making weird dog sounds. We also watched our dog eating grass daily.... Every day!
<p>We switched her dto a different dog food called <a href="">
    Purina Pro Plan SAVOR</a> days. The dog diarrhea, dog constipation, weird dog sounds, and having to watch our dog eat grass all went away. I am in no way
    advocating that Labrador retrievers should eat Purina Pro Plan SAVOR over Taste of the Wild, on the contrary I would recommend trying taste of the wild first.
    However, pay close attention to how your dog reacts and adjust accordingly. Mine for some reason required a different type of dog food.
<h1 class="headings">Best Toys for Golden and Chocolate Labs (Add pic Below)</h1>
<p>Any toy really is good enough for a labrador retriever. However, my favorite has been a <a href="">
    Sturdy Rope Toy</a>. Labs love to chew, therefore you will want to get a toy that will not break down fast and last a while. More Examples of study toys are
</a href="">
    Kong Rubber Balls</a>, <a href="">
    Kong-Classic Dog Toy</a>, or even a <a href="">
    Kong KM2 Ring Toy</a>. However, you definitely cannot go wrong with just a tennis ball. You can buy a pack of 45 <a href="">
    Tennis Balls</a> which comes out to around 78 cents each. Fourty-five tennis balls should be enough for your life-time. If you do not wish to buy a pack
    in bulk you can easily purchase one from your local store such as Big-Five, WalMart, or other sporting good stores.
<h1 class="headings">Summing it all up, a Chocolate lab, Golden lab, and other dog breeds</h1>
    <img id="ZoeChristmas" src="Images\ZoeChristmas.jpg"
          alt="Zoe in a Christmas Pic">
<p>We have discussed the popular opinions about labrador retrivers (this includes golden retrievers also), a brief history of a Labrador Retriever,
    why labs make such good pets, why they are an excellent pick for infants and young kids, who should and should not have a labrador retriever,
    what a lab needs to stay healthy physically and mentally, and a few mentions of what toys labs like the most that will last (for a while anyways).
    With this information you can know if a lab is right for you, the best kind of dog food, and toys you can order easily online to be shipped to your house
    which are usually far cheaper the the prices sold in stores.


Github website to view online: (Note; actively playing around with the code to try and figure this out)

What have you tried? I don’t see any media queries. Also what is this

I don’t see that class in your code that you posted. And your link to your project doesn’t work.

I am lost as to how the media query is even written to cover all the classes and id’s of the HTML document. I don’t understand it from the curriculum. I am looking up stuff online but I feel like I have writer’s block! I just don’t get it.

Thanks for pointing out the ThreePicsChildElement, I made changes to get that to work and forgot to delete it. If you could also tell him how to size the height of that middle pic I sure would appreciate it. Also, launching it from my computer the three pictures are Centered, however, on github they are not. I copy and pasted a few different times everything from my files on my computer, I have no idea why it is doing that.

The link to github has been updated, I had to re-do the repository to add external file links. Thank you


This is from W3Schools website on the media, query, I am not sure where to go from here. I have an external file for the Media’s.

/* For mobile phones: */
[class*=""] {
  width: 100%;

@media only screen and (min-width: 768px) {
  /* For desktop: */

I would change min-width to max-width and the where the comment is write the css for how you want your app to look on a smaller screen. Media queries don’t cover all classes and id’s, you need to write the css for them specifically.

Your link works now but it is not a link to your code. I’ve been looking on my iPad and there are no dev tools to inspect your code (as far as I know) so I can’t comment on your other style questions.

I am so sorry, I am new to all of this. Here is the link to my index file and CSS. Thank you so much for helping me!



In the FCC curriculum you probably would’ve used media queries when doing the Landing Page and Technical Documentation Page projects and possibly the Portfolio project. Basically you’d do the same thing for the page you’re doing now.