Mobile Background Size

johnwilson · June 29, 2020

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

Hello,

I am trying to figure out how to resize solely the background image of my mobile website, it keeps getting cutting off (as shown below). Would I be able to edit this in CSS? I've been trying to find some code on these forums but nothing has worked yet.

Thank you!

rwp · June 29, 2020

<style>
@media only screen and (max-width: 600px) {
  .section-background {
    background-color: black !important;
  }

  .section-background img {
    height: 50vh !important;
    margin-top: 25vh;
  }
}
</style>

Put this in the code injection for the page you want it to work on.

Edited June 29, 2020 by rwp

johnwilson · June 30, 2020

Thank you so much! It worked!

Edited June 30, 2020 by johnwilson

johnwilson · June 30, 2020

@rwp So it worked great for the home page, however it changed my "Contact Us" page to being all black instead of the contrasting white page that it was. Is there anyway around that obstacle now?

rwp · June 30, 2020

Make sure you put the code in the code injection section of the home page. Not in the site wide code injection area.

johnwilson · June 30, 2020

@rwp Awesome! Thank you so much for your assistance!

Mobile Background Size

Recommended Posts

johnwilson

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

rwp

rwp

johnwilson

Posted Images

rwp

Link to comment

johnwilson

Link to comment

johnwilson

Link to comment

rwp

Link to comment

johnwilson

Link to comment

Create an account or sign in to comment

News

rwp

rwp

johnwilson

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources