Jump to content

Need help with code - specific title size on mobile and desktop

Recommended Posts

Site URL: https://diedesignwerkstatt.squarespace.com/

Hello,

I would like to style the title size of a page differently for mobile and desktop.

The code for the desktop page would be

#collection-6166d3ebdb2e18c3871609 h1 {
font-size: 80px;
}


The code for the mobile page would be

#collection-6166d3d3ebdb2e18c3871609 h1 {
font-size: 40px;
}


But what is the code that squarespace recognizes that one is desktop and the other is mobile? If I put @media screen and (max-width: 690px) in front of the other code for mobile for example, it doesn't work.

Page on website: Services // Site password: test123

Thanks a lot!

Greetings

Jasmin

Bildschirmfoto 2022-01-31 um 08.58.46.png

Link to comment
6 hours ago, JasminMunich said:

Site URL: https://diedesignwerkstatt.squarespace.com/

Hello,

I would like to style the title size of a page differently for mobile and desktop.

The code for the desktop page would be

#collection-6166d3ebdb2e18c3871609 h1 {
font-size: 80px;
}


The code for the mobile page would be

#collection-6166d3d3ebdb2e18c3871609 h1 {
font-size: 40px;
}


But what is the code that squarespace recognizes that one is desktop and the other is mobile? If I put @media screen and (max-width: 690px) in front of the other code for mobile for example, it doesn't work.

Page on website: Services // Site password: test123

Thanks a lot!

Greetings

Jasmin

Bildschirmfoto 2022-01-31 um 08.58.46.png

Try in Home > Design > Custom Css

/*style for desktop*/
#collection-6166d3d3ebdb2e18c3871609 h1 {
  font-size: 80px;
}

/*style for mobile*/
@media only screen and (max-width: 690px) {
  #collection-6166d3d3ebdb2e18c3871609 h1 {
    font-size: 40px;
  } 
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 1/31/2022 at 3:59 PM, bangank36 said:

Try in Home > Design > Custom Css

/*style for desktop*/
#collection-6166d3d3ebdb2e18c3871609 h1 {
  font-size: 80px;
}

/*style for mobile*/
@media only screen and (max-width: 690px) {
  #collection-6166d3d3ebdb2e18c3871609 h1 {
    font-size: 40px;
  } 
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

It worked!! Thank you!!

I see that on mobile the text is not centered. I tried to add "{ text-align: center }", but that didn't work. Can you help here?

And how can I turn off the hover effekt on mobile? 

Pics attached. Thank you!

Bildschirmfoto 2022-02-02 um 05.15.41.png

Bildschirmfoto 2022-02-02 um 05.15.47.png

Link to comment
10 hours ago, JasminMunich said:

It worked!! Thank you!!

I see that on mobile the text is not centered. I tried to add "{ text-align: center }", but that didn't work. Can you help here?

And how can I turn off the hover effekt on mobile? 

Pics attached. Thank you!

Bildschirmfoto 2022-02-02 um 05.15.41.png

Bildschirmfoto 2022-02-02 um 05.15.47.png

Try

@media only screen and (max-width: 690px) {
  .portfolio-hover-item-content {
    display: flex;
    justify-content: center;
  }
}

Let me know how it works

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.