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

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
 }

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? 

Hello, thank you for responding. I would like the mobile to look similar to the desktop; one block of text not a staircase of text with overlapping images. 

Thank you for your help 🙂 

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 🙂

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.

I think i did it! 🙂 thanks for all your help:)