• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive Quirk Help

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive Quirk Help

This topic is: resolved

Tagged: images, Infinity Pro, responsive

  • This topic has 5 replies, 2 voices, and was last updated 5 years, 4 months ago by Gary10.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 30, 2018 at 9:33 am #215872
    Gary10
    Member

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

    https://usgj.com/
    January 30, 2018 at 10:37 am #215874
    Victor Font
    Moderator

    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?

    January 30, 2018 at 10:53 am #215875
    Gary10
    Member

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

    January 30, 2018 at 4:29 pm #215880
    Victor Font
    Moderator

    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?

    January 31, 2018 at 7:45 am #215909
    Gary10
    Member

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

    January 31, 2018 at 8:11 am #215910
    Gary10
    Member

    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
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Responsive Quirk Help’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble