CODEWITHSUNDEEP
csssafarimediafont-size
user2543032
user2543032

Reputation: 23

Resizing fonts for different screen width using @media – not working in Safari

I have a logo that is plain text, and have set up 3 media query to respond to different screen-sizes. In firefox the media queries work correctly, but in safari the last @media (max-width: 680px), has no effect on the font size.

@media (max-width: 1000px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: relative;
   padding: 0 20px;
   margin: 20px auto;
   height:40px;
   margin-top:40px;
}

.logo p {
   text-align: center;
   text-indent: -110px;
}

.logo p a {
   font-size:140px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}

@media (max-width: 680px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: static;
   padding: 0 20px;
   margin: 20px auto;
   height:0px;
   margin-top:40px;
}

.logo p {
   text-align: left;
   text-indent: 0px;
}

.logo p a {
   font-size:80px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}

Thanks!

Upvotes: 2

Views: 411

Answers (1)

Alex
Alex

Reputation: 28

I think you just forgot to close some brackets! I always do this with media queries because they color code strangely in my code editor.

Add a closing squiggly bracket before the 2nd @media and also at the end of your code.

Here's it done for you

    @media (max-width: 1000px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: relative;
   padding: 0 20px;
   margin: 20px auto;
   height:40px;
   margin-top:40px;
}

.logo p {
   text-align: center;
   text-indent: -110px;
}

.logo p a {
   font-size:140px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}}  /*Added bracket*/

@media (max-width: 680px) {
  header {
    padding: 0;
  }

.logo {
   z-index: 0;
   position: static;
   padding: 0 20px;
   margin: 20px auto;
   height:0px;
   margin-top:40px;
}

.logo p {
   text-align: left;
   text-indent: 0px;
}

.logo p a {
   font-size:80px;
   font-family: "MaiolaBasic-BoldItalic", Georgia, serif;
   color: #000000;
}} /*Added Bracket*/

Upvotes: 1

Related Questions