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

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

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

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

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!

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!

Try

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

Let me know how it works

17 hours ago, bangank36 said:

Try

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

Let me know how it works

The hover is still there, but the content is now centered. Thank you 🙂