Jump to content

My custom code looks weird in mobile. Is there a way to just adjust the mobile site on my main page?

Recommended Posts

Site URL: https://dodecahedron-parsnip-8fxe.squarespace.com/

My landing page looks bad in mobile, it is custom coded. I want to be able to play around with the image placement and the way the words are spread out. Can I just go into the mobile page and adjust or will it mess everything up?

Thanks kindly, 

Sydney

 


Here is the code I am using now. 

html, body {
     cursor: url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/633c20cb9d5a681a3d71742d/1664884939607/old+lady+cursor.png), auto;
   }
body, html {
  cursor: url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/633c20cb9d5a681a3d71742d/1664884939607/old+lady+cursor.png), pointer;
}

.image1{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/6334781e666916429a94bbec/1664383006063/image1.jpghttps://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/6334781e666916429a94bbec/1664383006063/image1.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }

.image14{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/633c983b9fe9741b6c8cf6d1/1664915515639/image14.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image3{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/6337248da0a07c294c4759be/1664558221664/image3.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image4{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/633724be9ce4b256d864474a/1664558272019/image4.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image5{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fa1f0343a123f648e3b/1664556961641/image5.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image6{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fa6b087f35ae1a2fc59/1664556967093/Image6.jpghttps://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fa1f0343a123f648e3b/1664556961641/image5.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image7{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fadbbe3801d0e55eefa/1664556973655/image7.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image8{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fb10354f117d7c4632a/1664556977733/image8.jpeg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image9{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fbd0b5a034755b7d9dc/1664556989598/image9.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image10{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fcc8315cd416570ca71/1664557004225/image13.gif);
 background-size:cover;
 background-repeat:no-repeat
 }
.image13{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fc487c0e25bfb10d689/1664556996908/image11.jpghttps://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fc487c0e25bfb10d689/1664556996908/image11.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image15{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/633ca5d1cbdfd731c048d1ca/1664918993950/image15.jpg);
 background-size:cover;
 background-repeat:no-repeat
 }
.image12{
color: transparent;
background-image:url(https://static1.squarespace.com/static/6332e9fb35394f26cc02996a/t/63371fc89708541318f597ad/1664557000426/image12.gif);
 background-size:cover;
 background-repeat:no-repeat
 }

Screen Shot 2022-10-04 at 7.12.39 PM.png

Screen Shot 2022-10-04 at 7.12.49 PM.png

Link to comment

You're on the Fluid Engine editor, so you do need to go in and adjust the layout on mobile throughout your website. Given that this text/image is in a single block you'll have to adjust it via CSS. How do you want this to look on mobile? Smaller text? Smaller images? 

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

I have made an advancement, on my mobile design site on Squarespace it looks perfect. See 1st image. But on my own phone it looks less good see 2nd image. Which pixel width should I use that will give me the best chance of it looking good on mobile? As you can see I have it at 1290 now and h2: 1.5rem

here is the code i used: 

/* CSS FOR MOBILE */
@media only screen and (max-width: 1290px) {
/* Start Insert Code for Mobile*/

// Header h1
 h1 {font-size:1rem !important} 

// Header h2
 h2 {font-size:1.5rem!important} 

// Header h3
 h3 {font-size:2rem !important} 

// Paragraph
 p {font-size:1rem !important} 


/* End Insert Code for Mobile*/
}

 

Thanks kindly 🙂

 

Screen Shot 2022-10-05 at 8.18.41 PM.png

IMG_5490.jpeg

Link to comment

For that text/image section ONLY I would suggest using VW instead of REM (test what number works yourself, start at 3 or 4). And use a media query that starts at maybe 1000px.

VW is viewport width, and will scale the text size to the screen width, which in this case should work well.

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.