Jump to content

Mobile Header has a different photo thank desktop

Recommended Posts

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 */
}

Screen Shot 2022-05-26 at 5.28.04 PM.png

Link to comment
  • Replies 6
  • Views 333
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

 

Link to comment
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;
}

}

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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/27/2022 at 6:06 AM, 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;
}
}

 

Expand  

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;
}

}

IMG_1212.jpg

Link to comment
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;
}
}

IMG_1221.jpg

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.