Custom font size media queries not working

dvgdvgdvg · February 1

Site URL: https://cyan-teal-3zmw.squarespace.com/

I'm trying to override Squarespace's responsive font sizes for my H1s at certain screen widths, but my media queries don't seem to be taking effect no matter what I do. Here's the code I'm currently using:

/* MY ATTEMPT TO OVERRIDE SQUARESPACE'S SETTINGS AT CERTAIN SIZES*/
h1 {
  @media screen and (min-width: 1024) and (max-width: 1111px) and (orientation: portrait), screen and (min-width: 1024) and (max-width: 1111px) and (orientation: landscape) {
      font-size: 54px!important;
    }
  @media screen and (min-width: 1112) and (max-width: 1295px) and (orientation: portrait), screen and (min-width: 1112) and (max-width: 1295px) and (orientation: landscape) {
      font-size: 56px!important;
    }
}

And here is an example of the default Squarespace media query I'm trying to override:

/* SQUARESPACE MEDIA QUERY I'M TRYING TO OVERRIDE */
@media screen and (min-width: 0) and (max-width: 1295px) and (orientation: landscape), screen and (min-width: 0) and (max-width: 1295px) and (orientation: portrait) {
  h1 {
    font-size: calc((4 - 1) * 1.2vw + 1rem);
  }
}

Site URL: https://cyan-teal-3zmw.squarespace.com/
Password: governance

Edited February 1 by dvgdvgdvg
(revised code)

dvgdvgdvg · February 2

Update: still completely unable to get a font size media query to work specifically at screen widths between 1024px to 1295px. (At those sizes it gets overridden by Squarespace's media query quoted above. No idea why those sizes specifically.) Found a complicated workaround though: instead of building the headline as an <h1>, I built it as a div without attaching to any existing font style, created a class for the div, and assigned a default font size to it that matches the size I need between 1024px to 1295px screen width, and created media queries to adjust the size outside of those widths. UGH. If anyone has a simpler fix I'd love to hear. Here's the code I'm using in the meantime:

<div class="homepage-headline-test" style="white-space:pre-wrap;">
  Headline goes here.
</div>

And here's the CSS:

.homepage-headline-test {
  margin: 1.2rem 0px;
  letter-spacing: -0.02em;
  font-size: 54px!important; /*THIS APPLIES TO 1024px TO 1295px*/
  line-height: .968;
  font-family: 'BrandonTextWeb-Bold', 'Arial', Sans-Serif;
  font-weight: normal!important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  /* MEDIA QUERIES FOR MAX-WIDTH 1023PX AND MIN-WIDTH 1296PX GO HERE */
    @media screen and (max-width: 736px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
      font-size: 42px!important;
    }
    @media screen and (min-width: 737px) and (max-width: 940px) and (orientation: portrait), screen and (min-width: 737px) and (max-width: 940px) and (orientation: landscape) {
      font-size: 45px!important;
    }
    @media screen and (min-width: 941px) and (max-width: 1023px) and (orientation: portrait), screen and (min-width: 941px) and (max-width: 1023px) and (orientation: landscape) {
      font-size: 48px!important;
    }
    @media screen and (min-width: 1296px) and (orientation: portrait), screen and (min-width: 1296px) and (orientation: landscape) {
      font-size: 60px!important;
    }
}

Custom font size media queries not working

Question

dvgdvgdvg 18

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

1 answer to this question

Recommended Posts

dvgdvgdvg 18

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources