Building a Magazine--Step 79

HTML-CSS
1

Good day: My code so far:

@media only screen and (max-width: 550px) {
  .hero-title {font-size: 6rem;}
  .hero-subtitle, .author, .quote, .list-title {font-size: 1.8rem;}
  .social-icons {font-size: 2rem;}
  .text {font-size: 1.6rem;}
}

I don’t seem to be getting a solution out of any of the other topics; my code seems to be OK. I just cannot see what I am doing wrong. What is happening is that only the first selector is recognized.

1 Like
2

Hello,
this is probably happening due to conflicting rules in you r CSS file, can you please provide the entire CSS code?

3

Thank you so much! Here it is:

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Baskervville', serif;
  color: linen;
  background-color: rgb(20, 30, 40);
}

h1 {
  font-family: 'Anton', sans-serif;
}

h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
}

a {
  text-decoration: none;
  color: linen;
}

main {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
  row-gap: 3rem;
}

img {
  width: 100%;
  object-fit: cover;
}

hr {
  margin: 1.5rem 0;
  border: 1px solid rgba(120, 120, 120, 0.6);
}

.heading {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1.5rem;
}

.text {
  grid-column: 2 / 3;
  font-size: 1.8rem;
  letter-spacing: 0.6px;
  column-width: 25rem;
  text-align: justify;
}

.hero {
  grid-column: 1 / -1;
  position: relative;
}

.hero-title {
  text-align: center;
  color: orangered;
  font-size: 8rem;
}

.hero-subtitle {
  font-size: 2.4rem;
  color: orangered;
  text-align: center;
}

.author {
  font-size: 2rem;
  font-family: "Raleway", sans-serif;
}

.author-name a:hover {
  background-color: #306203;
}

.publish-date {
  color: rgba(255, 255, 255, 0.5);
}

.social-icons {
  display: grid;
  font-size: 3rem;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
}

.first-paragraph::first-letter {
  font-size: 6rem;
  color: orangered;
  float: left;
  margin-right: 1rem;
}

.quote {
  color: #00beef;
  font-size: 2.4rem;
  text-align: center;
  font-family: "Raleway", sans-serif;
}

.quote::before {
  content: '" ';
}

.quote::after {
  content: ' "';
}

.text-with-images {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 3rem;
  margin-bottom: 3rem;
}

.lists {
  list-style-type: none;
  margin-top: 2rem;
}

.lists li {
  margin-bottom: 1.5rem;
}

.list-title, .list-subtitle {
  color: #00beef;
}

.image-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, min-content);
  gap: 2rem;
  place-items: center;
}

.image-1, .image-3 {
  grid-column: 1 / -1;
}

@media only screen and (max-width: 720px) {
  .image-wrapper {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 600px) {
  .text-with-images {
    grid-template-columns: 1fr;
  }
}
4

Aye mate, seems like your media query might be getting overridden by more specific CSS rules elsewhere. Check the specificity of other styles affecting those elements and make sure there are no syntax errors in your CSS. Use browser dev tools to inspect applied styles for better troubleshooting. Cheers!

5

Instructions:
Create a third @media query for only screen with a max-width of 550px. Within that, create a .hero-title selector with a font-size set to 6rem, a .hero-subtitle, .author, .quote, .list-title selector with a font-size set to 1.8rem, a .social-icons selector with a font-size set to 2rem, and a .text selector with a font-size set to 1.6rem.

6

You need to create a third media query. Right now, you have two.

7

The media query you have in your first post is correct, but missing from the second code you posted.

If you copy and paste the code from your first post to the bottom of the CSS file, it should pass. Do not change anything else.

In the future.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

8

Thanks very much for your reply!

9

Thanks for replying!

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.