Twenty Twenty Featured Image Issues

  • jakesaunders

    (@jakesaunders)


    4 years, 5 months ago

    Hi,

    Loving the Twenty Twenty Theme, just one issue that is a deal breaker for me. On the iPad the featured cover images display zoomed in until I request a desktop version of the site. This is the same in Safari & Chrome on the iPad.

    I have read other issues with the previous year’s themes but I can’t apply the fixes to this site as it seems to have been designed differently.

    Any help would be appreciated. Site is http://www.stagetaken.co.uk

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Jarret

    (@jarretc)

    4 years, 5 months ago

    Hi, I think this may be what you’re looking for?

    @media screen and (max-width: 768px) {
	.cover-header.bg-image {
		background-size: contain;
		background-position: top;
	}
}

    If you throw that into Appearance->Customize->Additional CSS to see what it does.

    MP

    (@therealmikep)

    4 years, 5 months ago

    @jakesaunders if you’re okay ditching the parallax (fixed background image) on iPad, this will do the trick:

    @media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
  .cover-header.bg-attachment-fixed {
    background-attachment: scroll;
  }
}
    • This reply was modified 4 years, 5 months ago by MP.
    Thread Starter jakesaunders

    (@jakesaunders)

    4 years, 5 months ago

    Thank you both for your responses, I will try both suggestions

    Cheers

    TungstenE2

    (@tungstene2)

    4 years, 3 months ago

    @therealmikep thx, this worked for me.

    Will this bug be fixed for the twenty twenty theme, that the cover-template scrolling/parallax function is not working on iphone/ipad?

    iksito

    (@iksito)

    4 years, 3 months ago

    Hi,
    I used @jarretc’s solution and it fixed the image issue on iPhone and iPad, thank you. However now the “home” button is very low meaning that there is a big void un the image. Is there anything that can be done to bring the “home” button and the rest of the page closer to the image? The website is http://www.irenekung.com
    Thank you!
    Giulia

    • This reply was modified 4 years, 3 months ago by iksito.
    TungstenE2

    (@tungstene2)

    4 years, 3 months ago

    how to adress the iOS issue to the developers in order to fix this?

    see also:
    https://wordpress.org/support/topic/twenty-twenty-cover-template-feature-image-parallax-is-not-working-on-ios/

    sunshowerbiz

    (@sunshowerbiz)

    3 years, 11 months ago

    I used @jarretc’s solution and it fixed the image issue on iPhone and iPad, thank you. However now the “home” button is very low meaning that there is a big void un the image. Is there anything that can be done to bring the “home” button and the rest of the page closer to the image? The website is http://www.irenekung.com

    @jarretc’s solution worked for me as well with the same results as @iksito (above). The other css solution by @therealmikep did not work for me. I had not chosen parallax background in the customizer. I tried it both ways.
    Using twenty twenty cover template, testing on an iPhone 10.
    Hope there is a solution or can someone tell me why @therealmikep’s solution did not work for me?

    • This reply was modified 3 years, 11 months ago by sunshowerbiz.
    maynda

    (@maynda)

    3 years, 10 months ago

    Both @jarretc and @therealmikep worked for me but only in the home page, all the rest are looking weird. Any suggestion?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Twenty Twenty Featured Image Issues’ is closed to new replies.