[slythic]

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.

[slythic]

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.

[slythic]

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

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

[slythic]

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!

[slythic]

Worked like a charm! Thanks Jamie!

[slythic]

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;

			}

		}*/

[slythic]

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?

[slythic]

Finally found a workaround!

Font Sizing bug in Chrome

[slythic]

I forgot to add a photo of how it's supposed to look. Here it is:

http://cl.ly/image/3U341l153P3m

[Author]

Posts