Responsive Quirk Help

[Gary10]

Photo responds on iPhone in Portrait and Landscape, but is cutoff on iPad in Landscape. Child Theme Infinity Pro (Testing).

https://usgj.com/

[Victor Font]

The issue stems from this CSS in style-front.css at line 146:

.front-page-1 {
    height: 100vh;
}

This CSS is forcing front-page-1 to stretch to the height of the screen. Since the image is a background image for front-page-1, it stretches both vertically and horizontally to fit the height dimension.

Is there any reason why you are using an image where the text cannot be indexed by search engines? You'd gain SEO value by placing U.S. Government Jobs in a custom html widget and creating a top and bottom border in your chosen colors. You also wouldn't have the responsiveness issues with text that you have with the image.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Gary10]

@Victor,

RE SEO, I'm just testing now before I build. Have other sites to build with this theme and want to fully understand it first.

Question: Why does the image format landscape and prortrait on phone but not tablet? Can this be corrected in the css?

[Victor Font]

The image doesn't format landscape or portrait. The image is what it is. Because you installed it as a background image on front-page-1, it is subject to the CSS I copied from your style sheet above. The 100vh is a viewport unit. It means 100% of the viewport. As long as you use the viewport dimension, front-page-1 and its background image will always scale to fill the height of the screen. Since you have the background image size set to cover, the image scales to fill the height of the viewport, but the image scales along both height and width dimensions. If you change the background image size to contain, you'll see a much different result.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Gary10]

@Victor, thank you for your time and help.

With inspector, toggle device to phone in portrait, the CSS changes from 100Vh to "max-width: 800px; height: auto" - iPad's resolution is too high.

Life ain't perfect 🙂

[Gary10]

UPDATE

If you want full width for background images on tablets in portrait mode:
Change "max-width: 800px" to 1400px and background image formats full width in portrait mode and full screen in landscape.

Laptops and desktops with resolutions below 1440 wide will have the same view as iPad in portrait mode.

USGJ.com

[Author]

Posts