dvgdvgdvg Posted February 1, 2021 Share Posted February 1, 2021 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 Link to comment
dvgdvgdvg Posted February 2, 2021 Author Share Posted February 2, 2021 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; } } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.