JasminMunich Posted January 31, 2022 Share Posted January 31, 2022 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 Beyondspace 1 Link to comment
Beyondspace Posted January 31, 2022 Share Posted January 31, 2022 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
JasminMunich Posted February 2, 2022 Author Share Posted February 2, 2022 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! Beyondspace 1 Link to comment
Beyondspace Posted February 2, 2022 Share Posted February 2, 2022 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
JasminMunich Posted February 3, 2022 Author Share Posted February 3, 2022 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 🙂 Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment