Homepage Graphic on Mobile

Hi David-
We’re currently working on a fix for this issue, which has to do with the way iPhones handle the CSS “cover” image size. In the meantime, you can fix this with custom CSS.

Navigate to Customize > Advanced > Custom JS & CSS and paste the following code into your Custom Theme CSS field:

@media only screen 
and (max-device-height : 1024px) 
and (max-device-width : 1024px) {
    .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
	background-position: center top;
    }
	.call-to-action h2 {
        font-size: 10vw !important;
    }
}

This will give you an iPhone view that looks like this:

Hi David-
Because of the square-ish dimensions of your image and the length of the text in your call-to-action, you’ll have to make a design judgement call for this.

I played around with a couple different solutions, and here’s the one I like best. This will make your call-to-action area black after the image ends, which actually makes your button stand out even better:

{
    .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
	background-position: center top;
	background-color: #000;
    }
    .call-to-action h2 {
        font-size: 10vw !important;
    }
}

You can also experiment with reducing the margin at the top. Here’s the code I tried:

@media only screen 
and (max-device-height : 1024px) 
and (max-device-width : 1024px) {
    .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
	background-position: center top;
	background-color: #000;
    }
    .call-to-action h2 {
        font-size: 10vw !important;
    }
    .site-content {margin-top: 0px;}
}

Which ends up looking like this:

Hi David-

Glad to hear we’re making progress! To get rid of the blue bar, add two more lines to your custom CSS:

.page-template-default .entry-content { margin-top: 0px; }
.post-title-hidden .site-content {padding-top: 0px; }

In order to remove the v-shaped spotlights, add two more lines:

body.page-template-default:after { border: none; }
body.page-template-default:before { border: none; }