Jump to content

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

Go to solution Solved by Ziggy,

Recommended Posts

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?

creArtep_screenshot_1.png

creArtep_screenshot_2.png

creArtep_screenshot_3.png

creArtep_screenshot_4.png

Edited by StepOne
Added password for the website
Link to comment
  • Solution

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.