Header & Image Resize for Mobile

Hi Lora-

For the Site Title, it looks like you may have a custom CSS rule adding the following:

.site-branding { margin-left: -34px; }

This is causing the first bit of your title to move off the left side of the screen on mobile.

As for the background image, it doesn’t look like you’re using the Theme’s background image setting in Customize > Background. It looks like the background image is in the homepage content. Could you elaborate a little bit on how you added that background image?

Hi Lora-

If you can’t find the source of the -34px margin, you can add this to your Custom CSS:

.site-branding { margin-left: 0px !important; }

The background image is a little tougher, since I’m guessing you’d like to have both the pupper and the logo visible on mobile. Since the image is so much wider than it is tall, it’ll be difficult to make it look right on a vertical mobile device.

Your first step will be to add a Custom ID to the block with the background. In this example, I used my-custom-background as the custom ID.

Then, you can add Custom CSS to force it to scale down correctly:

#my-custom-background {
	background-size: contain !important; 
	background-repeat: no-repeat !important; }

This might sound a little tricky, so I spent a couple minutes creating this video to walk you through it:

Hi Lora-
Glad to help! Since that call-to-action widget that normally comes with the theme is gone, you’ll need a little extra margin on the entry content.

It looks like this rule will get the job done for you, in your Custom Theme CSS:

@media only screen and (max-device-width : 752px) {
    .entry-content {margin-top: 300px;}
}

Hi Lora-
My apologies, I should have checked other pages. There’s another rule that applies to your pages other than home that’s overriding the one we just added. Change it to add !important, like this:

@media only screen and (max-device-width : 752px) {
    .entry-content {margin-top: 300px !important;}
}

Happy to help Lora, let us know if there’s anything else you need a hand with!