Jump to content

Shift the position of background image only on mobile

Recommended Posts

Site URL: https://www.campuspa.com/

I'm using a few images at the top of pages as a backgrounds. The positioning of the image is awkward on mobile, so I want to shift the position of the background image.

Here's the code I have right now:

@media screen and (max-width: 640px) {
  #sections :nth-of-type(1)  {
    background: red;
  }
}

So far as I understand, this is supposed to select just the section of the page at the top with the image and turn the background red (just for show, to see if it works). However, this changes the background of the entire homepage red instead of just that slide.

I've messed around a bunch with different nth-of-type selection cascades with no luck so far. Any tips are greatly appreciated.

Thanks in advance!

Daniel

Link to comment
  • Replies 4
  • Views 3.7k
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

/* Resize home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset !important;
    height: 40vh;
}
/* h1 size */
.homepage #page section:first-child h1 {
    font-size: 30px;
}
/* h3 size */
.homepage #page section:first-child h3 {
    font-size: 14px;
    margin-top: 0 !important;
}
}

 

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

Thank you tuanphan - got this to work building from your code! In case anyone else ever finds this, here's what I ended up with:

@media screen and (max-width:767px) {
.homepage #page section:first-child > div.section-background > img {
      object-position: -680px -200px !important;
      height: 56em !important;
  }
}

Difference in the selector was I had to add "> div.section-background > img" to select the background image in particular. This was necessary to apply the object-position adjustments to move the positioning of background. 

Note that the !important tag is necessary for this to work, otherwise Squarespace will override the position value. 

Link to comment
  • 1 month later...

hey guys, @tuanphan and @fleet

I need some help here please. I have the same issue.

I need to just move the position of my background image for Tablet Landscape.

This is what I've tried, but nothing is happening. I just want to move the image to the right a bit so the guy isnt cut off.

Here's the url for you to look at https://www.constructionconsultingacademy.com/

@media only screen and (max-device-width : 1024px)
and (min-device-width : 768px) {
.Index-page .Index-page--has-image #welcome section:first-child > div.section-background > img {
      object-position: -680px -200px !important;
      height: 56em !important;
  }
} 

image.thumb.png.27f8a6dfdfbecfab1a2dd099d8918e66.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.