Jump to content

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

By StepOne, in Customize with code

Go to solution Solved by Ziggy,

Recommended Posts

StepOne Level 4

StepOne

Posted
Posted (edited)

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
  • Replies 2
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

StepOne
StepOne

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

Posted Images

  • Solution
Ziggy Level 14

Ziggy

Posted
  • Solution
Posted

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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? 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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources