How to put separate headings (size) in desktop and mobile view?

StepOne · September 30, 2022

Site URL: https://fife-salamander-9w6h.squarespace.com/

Password: PetraHemmerijckx1760

It is about the heading (creArtep) in the gold rectangle on the homepage that overlays the image.

In desktop view my client wants a bigger title, as big as possible while preserving x amount of padding above and beneath the title. No problem, I changed it to an H1 title and the description below as a paragraph 1.

But when I go to mobile view and change the title and desc to a smaller size, H3 and P2, the size also changes to H3 and P2 for the desktop view.

Would I have to change the CSS in the advance tab with an @media only tag to account to allocate the correct heading size to certain screen sizes?

Edited September 30, 2022 by StepOne
Added password for the website

Ziggy · September 30, 2022

Can you share the site wide password for you website?

Yes, you may want to add some Custom CSS to adjust headings on mobile screens if you don't like how they scale.

@media only screen and (max-width:640px) {
  h1 {
    font-size:3rem;
  }
  h2 {
    font-size:2.5rem;
  }
  h3 {
    font-size:2rem;
  }
  h4 {
    font-size:1.8rem;
  }
}

You'll have to adjust the values as I can't see your website currently.

You can pick between:

rem for relative em compared to your set base size;
px for just a set value;
vw to scale directly based on viewport width (screen width);
calc(18px + 3vw) for a variable with a base size.

StepOne · October 1, 2022

Thank you for the answer, Ziggy. I will try it out as soon as posisble and will report back here.

The password is shared in the original post: PetraHemmerijckx1760

How to put separate headings (size) in desktop and mobile view?

Recommended Posts

StepOne

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

StepOne

Posted Images

Ziggy

Link to comment

StepOne

Link to comment

Create an account or sign in to comment

News

StepOne

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources