Twenty Twenty Featured Image Issues

  • jakesaunders

    (@jakesaunders)


    5 years 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 https://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)

    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)

    @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 5 years ago by MP.
    Thread Starter jakesaunders

    (@jakesaunders)

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

    Cheers

    @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?

    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 https://www.irenekung.com
    Thank you!
    Giulia

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

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

    see also:
    https://www.ads-software.com/support/topic/twenty-twenty-cover-template-feature-image-parallax-is-not-working-on-ios/

    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 https://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 4 years, 6 months ago by sunshowerbiz.

    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.