Moesia Hero Image parallax/image scaling

Hello there,

I just updated my hero image (exactly 1920 x 1080 px). Two questions:

  1. The theme cuts off the bottom of my image on a laptop screen. It should say 1988 - 2018 at the bottom in blue, but these dates are cut off. Can the hero image container be fixed to show the entire image?
  2. Is there a way to show the hero without the parallax on a big screen? I think that’s what it’s called. I don’t want to scroll with the header to see the whole image upon landing on the page.

For reference, it is the hero on this page: https://theanimalleague.org.

Thanks!

Hi there,

Please try to add following CSS code to Customize > additional CSS:

.has-banner:after{
    background-size: 100% 100%;
    background-attachment: initial;
}

.site-header {
    top: -100px;
}

Regards,
Awan

Hi Awan,

It worked, and I like the effect of the main navigation bar being translucent.

There are thtrr issues though:

  1. Look at the horizontal light gray bar right below the hero image. It shouldn’t be there. The links in the ‘below header’ widget (e.g., Abandoned: An Animal League Original Series, etc. should come directly after the hero image. This extra gray bar is there on all screen sizes. Wondering if it has anything to do with the ‘below header’ widget.

  2. On a small screen (e.g., iPhone), the translucent main navigation now covers 50% of the hero image when holding the phone vertically. It covers the hero image at about 10% when holding the image horizontally.

  3. On small screen (e.g., iPhone), the page seems to move left and right when it shouldn’t.

Are there fixes?

Thank you!

Hi,

Try this CSS code to fix the issue:


.home .bh-widget-area, .home .site-content {
    top: -100px;
    position: relative;
}

@media only screen and (max-width: 1024px){
	.home .bh-widget-area, .home .site-content {
		top: -170px;
	}
}
@media only screen and (max-width: 850px){
	.home .bh-widget-area, .home .site-content {
		top: -300px;
	}
	.site-header {
		top: -110px !important;
	}
	.site-logo {
		max-width: 90px !important;
	}
}

@media only screen and (max-width: 768px){
	.home .bh-widget-area, .home .site-content {
		top: -340px;
	}
}

@media only screen and (max-width: 425px){
	.home .bh-widget-area, .home .site-content {
		top: -525px;
	}
	.site-logo {
		max-width: 50px !important;
	}
	.nav-search{
		top: -25px;
	}
	.nav-deco{
		top: -50px;
	}
}
@media only screen and (max-width: 375px){
	.home .bh-widget-area, .home .site-content {
		top: -545px;
	}
}

Hi Awan,

Unfortunately that code didn’t solve any of the 3 issues reported above. I couldn’t keep the code live on the site for you to see it because it completely removed the hero image on the small screen. Any other CSS thoughts?

I played around with the code, changing to the below to -10 instead of -100 helped with problem #2 when the phone is turned to portrait. But when I turn the phone to landscape, a white bar is now added between navigation menu bar and hero image. Eeks!

.site-header {
top: -100px;
}

Hi,

Can you temporary disable the top bar for the “Donate” button? and let see if the CSS code in above works.