Fixing the Twenty Seventeen Theme Zoom Problem on the iPad

The Twenty Seventeen WordPress theme is a beaut. You can set up your home page to scroll any number of fixed pages, each with its own header image, each appearing as you scroll down the page. For an art site, like shymaladasonart.com, this is gorgeous and lets you show off sample images.

Problem is, on the Pad the images look horrendous because the CSS makes them weirdly zoom in at a huge magnification, and the previously-lovely effect becomes a mess.

After a lot of poking about, this bug’s apparently been an issue for quite a while, and obviously still isn’t fixed. Fortunately, there is a workaround. You need to log in to wp-admin, select Appearance > Customize > Additional CSS, and add this:

@media screen and (min-device-width:768px) and (max-device-width: 1024px) {
    .background-fixed .panel-image { 
        background-attachment: unset;
        width: 100%;
    }
}

This will check specifically for the iPad, and turn off the pretty effect that scrolls the page content over the header image. It’s not quite as cool on the iPad, but at least now it doesn’t look bad.