Altitude Pro : home page style on other pages

[Exkalibur85]

I just solve it.

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

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

[DamVan]

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ì

[jnomanh]

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

[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]

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;

			}

		}*/

[James]

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)

[slythic]

Worked like a charm! Thanks Jamie!

[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!

[James]

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;

}

[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

[James]

add

background-attachment: scroll;

in your media queries, that will fix it

I've updated the gist as well

[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.

[James]

Thanks slythic !

[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.

[Author]

Posts