• 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

Altitude Pro : home page style on other pages

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 › Altitude Pro : home page style on other pages

This topic is: not resolved

Tagged: Altitude Pro, background, featured image

  • This topic has 33 replies, 8 voices, and was last updated 6 years, 6 months ago by slythic.
Viewing 14 posts - 21 through 34 (of 34 total)
← 1 2
  • Author
    Posts
  • July 5, 2015 at 10:21 am #158406
    Exkalibur85
    Participant

    I just solve it.

    I just reduce the height for that resolutions and works good now.

    .image-header {
    min-height: 250px;
    }

    July 5, 2015 at 10:05 pm #158462
    DamVan
    Member

    would the product/page title need to be over the image too?


    thiết kế logo chuyên nghiệp – thiết kế logo – thiết kế bao bì

    January 9, 2016 at 5:37 am #176049
    jnomanh
    Member

    You should set a default value.

    .image-header {
    width: auto !important;
    min-height: !important;
    }


    Thiết kế logo, Thiết kế bao bì chuyên nghiệp, thiết kế catalogue sản phẩm, thiết kế nhận diện thương hiệu, thiết kế profile, thiết kế brochure

    September 5, 2016 at 2:56 pm #192655
    slythic
    Member

    Happy Labor Day!

    I am trying to do the same thing on my website. I just need to make the featured image of each page the background image (100% width) with the title of the post on top, just like it works on front page section 1 of Altitude Pro. The rest of the content will be underneath, like front page section 2 would be.

    I tried following the steps on this page and the implementing the code provided but the results aren't the same, plus I get an error on the front page. Is the code no longer compatible with the latest theme versions?

    Any solutions that might work?

    September 5, 2016 at 6:24 pm #192666
    slythic
    Member

    I solved my problem with double declaration of altitude_featured_body_class by commenting out the following code in front-page.php. Seemed safe to do as I will never use a sidebar with this theme.

    If there is a better way to go about this, please let me know! Hope this helps others.

    //* Add featured-section body class
    /*		if ( is_active_sidebar( 'front-page-1' ) ) {
    
    			//* Add image-section-start body class
    			add_filter( 'body_class', 'altitude_featured_body_class' );
    			function altitude_featured_body_class( $classes ) {
    
    				$classes[] = 'featured-section';
    				
    				return $classes;
    
    			}
    
    		}*/
    
    September 5, 2016 at 6:38 pm #192667
    James
    Participant

    hey folks, sorry for the long absence

    I've updated the body class function name in that code snippet, would of been the cause of a front page error (duplicate function name)

    September 5, 2016 at 6:42 pm #192668
    slythic
    Member

    Worked like a charm! Thanks Jamie!

    September 6, 2016 at 7:38 am #192684
    slythic
    Member

    Having a small hiccup, hopefully you guys can help!

    The inner page featured image doesn't scale like the images on the front page when using mobile devices (iPhone & iPad). When I load the front page with those devices the images are nicely scaled, when loading the inner page the featured image appears zoomed in/not scaled back. I'm assuming this is a simple CSS styling issue but can't figure it out.

    For testing purposes I'm using the same image as the front page section 1. So I know it's not the image itself.

    Thanks in advance!

    September 6, 2016 at 3:56 pm #192719
    James
    Participant

    are you using the correct css?

    .image-header {
    min-height: 400px;
    background-attachment: fixed;
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

    }

    September 6, 2016 at 5:43 pm #192723
    slythic
    Member

    Hi Jamie,

    Thanks for the quick reply!

    Yes, same code. I basically copied everything over from your gist file over. It happens on the laptop but mostly noticeable on iPhone and iPad where the image appears to be zoomed in (it's likely displayed at full size rather than scaled back.

    Hopefully the screenshots below help show the issue better than I can describe.

    The front page on iPhone.
    https://cl.ly/2p1S1n1y111v
    front page

    The inner page on same iPhone.
    https://cl.ly/2Y0Q2D3Y2B0F
    inner page

    September 6, 2016 at 6:08 pm #192724
    James
    Participant

    add

    background-attachment: scroll;

    in your media queries, that will fix it

    I've updated the gist as well

    September 6, 2016 at 6:37 pm #192725
    slythic
    Member

    You got it!

    You should setup a paypal donate button. I much rather give you the money than others charging for subscriptions on their websites for this same information.

    By the way, love what you did with your website and general design direction.

    September 6, 2016 at 7:04 pm #192727
    James
    Participant

    Thanks slythic !

    September 6, 2016 at 10:05 pm #192729
    slythic
    Member

    Hi Jamie,

    One last thing you might want to add to your gist file...

    The iPad version was still having the same scaling issue, so I assumed correctly that the max width for @media needed to be added to the CSS file to accommodate for the iPad (I have the 9.7" iPad Pro which might have a higher res?). After fixing the image scaling issue on the iPad I noticed the image wasn't positioned correctly, from my testing, background-position:top worked the best.

    Here's the code that worked for me. Let me know if you can perfect further.

    @media only screen and (max-width: 1200px) {
      .image-header {
          background-attachment: scroll;
          background-position:top;
      }
    }

    Hope this helps others.

  • Author
    Posts
Viewing 14 posts - 21 through 34 (of 34 total)
← 1 2
  • The forum ‘Design Tips and Tricks’ is closed to new topics and 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