Mobile Header has a different photo thank desktop

Site URL: https://bugle-tiger-xp8f.squarespace.com/home-new

I am trying to make the mobile version header photo only be the book: this is the code I used; I am having a problem with there being a white space and I don't know how to get ride of it! 

https://bugle-tiger-xp8f.squarespace.com/home-new

Password: Lumi123

- Lindsey 

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-628c173f2ef62056d4a40e76 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/v1/623f85bf8fd74f22ac7ef665/bb876ae1-628f-488c-bc63-20cb920edd06/Lumi+front+cover+from+ID+%281%29.jpg?format=2500w");
      margin-bottom: 45% !important;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Code for Mobile Above This Line */
}

Add to Design > Custom CSS

@media screen and (max-width:767px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 45vh;
}
}

7 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 45vh;
}
}

 

it worked thank you!

9 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 45vh;
}
}

 

So now my problem is if a phone is horizontal the top is grey, I am trying to use tablet code to change this?

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-628c173f2ef62056d4a40e76 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/v1/623f85bf8fd74f22ac7ef665/aa5c720d-ff20-43d8-b009-01e910b88800/Untitled+design.png?format=2500w");
      margin-bottom: 45% !important;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-628c173f2ef62056d4a40e76 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/v1/623f85bf8fd74f22ac7ef665/bb876ae1-628f-488c-bc63-20cb920edd06/Lumi+front+cover+from+ID+%281%29.jpg?format=2500w");
      margin-bottom: 45% !important;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Mobile Above This Line */
}

@media screen and (max-width:767px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 52vh;
}
}

@media screen and (max-width:991px) and (min-width:768px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 52vh;
}

}

On 5/28/2022 at 3:40 AM, LindseyMexico14 said:

So now my problem is if a phone is horizontal the top is grey, I am trying to use tablet code to change this?

 

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-628c173f2ef62056d4a40e76 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/v1/623f85bf8fd74f22ac7ef665/aa5c720d-ff20-43d8-b009-01e910b88800/Untitled+design.png?format=2500w");
      margin-bottom: 45% !important;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-628c173f2ef62056d4a40e76 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/v1/623f85bf8fd74f22ac7ef665/bb876ae1-628f-488c-bc63-20cb920edd06/Lumi+front+cover+from+ID+%281%29.jpg?format=2500w");
      margin-bottom: 45% !important;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Mobile Above This Line */
}

@media screen and (max-width:767px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 52vh;
}
}

@media screen and (max-width:991px) and (min-width:768px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 52vh;
}

}

Hi,

Can you take a screenshot of problem?

9 hours ago, tuanphan said:

Hi,

Can you take a screenshot of problem?

yes here it is - this happens when you turn the mobile horizontal, I have been trying to correct it with the tablet code 

On 5/29/2022 at 2:37 AM, tuanphan said:

Hi,

Can you take a screenshot of problem?

I have tried making the photo smaller, the grey went away, but the picture is cut in half! (this problem is when you turn your phone horizontal) I need to be able to see the photo as a whole ...if possible

here is the CSS tied to this 

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
#collection-628c173f2ef62056d4a40e76 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/v1/623f85bf8fd74f22ac7ef665/eb49a550-16a5-4fdb-9536-29c2dabe538a/resize-16539422311905163160LumiLandingImage300dpinologo1.jpg?format=2500w");
      margin-bottom: 0% !important;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
#collection-628c173f2ef62056d4a40e76 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://images.squarespace-cdn.com/content/v1/623f85bf8fd74f22ac7ef665/bb876ae1-628f-488c-bc63-20cb920edd06/Lumi+front+cover+from+ID+%281%29.jpg?format=2500w");
      margin-bottom: 45% !important;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
/* Insert Code for Mobile Above This Line */
}

@media screen and (max-width:767px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
    height: 52vh;
}
}

@media screen and (max-width:991px) and (min-width:768px) {
#collection-628c173f2ef62056d4a40e76 #page .page-section:nth-of-type(1) .section-background {
    margin-top: 0 !important;
}
[data-section-id="628c173f2ef62056d4a40e78"] {
    min-height: unset !important;
     height: 52vh;
}
}