- This topic has 7 replies, 3 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
Hello,
I was previously using the full width container for header page hero settings until I found out that this was not working nicely on big screens as it was displaying very large width images above a contained main page.
I’m now switching to contained containers and just testing with this first site to see how it works.
Sizes are now fine as they keep the general container size to 1200 px but hero images are getting enlarged, like zoomed in, instead of getting the whole image.I’m certainly doing something wrong…but what exactly?
The logo is inside the top bar and still works fine though.
Thanks!
Customer Support
Hi there,
maintaining aspect ratios of background images is very tricky. Especially when there is content in the container and the container doesn’t fill the screen.
First thing you may want to set the Header Elements Background Postiion to
center centerThen try this CSS:
@media(min-width: 1301px) { .page-hero { height: 445px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; } }When the screen is larger then the width of the hero it fixes the height of the hero…. not this relies on all your images being the same size / aspect ratio.
Thanks David!
That seems to work just fine but I still have some questions:
1. After posting, I tested further with other sites and noticed that those that have “merge with content” headers don’t have the same issue and proportions are kept unchanged. Was wondering whether there is a way to cheat this setting and have merged headers that don’t really merge (!) by using some special “Offset Site Header Height” – but maybe I’m simply dreaming.
2. I see that the height value you used here is close to the size of those images which is in fact 400px. Should I adapt it to the precise height size of pictures used for each site? In this case, set it to 400px instead of 445px?
3. @media(min-width: 1301px): should this value for the width correspond to the container’s width +1px? I have some sites with a container width set to 1400px – should I adapt this here to @media(min-width: 1401px)?
4. This particular site is using parallax for the background image, so cannot use “center center” but that doesn’t seem to be an issue as far as I can see (your snippet is currently enabled).
5. This site is using hero images with same proportions and sizes but others don’t. What happens in such cases, when for instance I have 1200 × 620 for pages and 1024 × 682 for posts?
Hope I’m not asking too much…
1. I can’t see that would make any difference to its behaviour – if you got an example site i can take a look to see whats going on … it may just be case of a better image aspect ratio.
2. You’re original image is 1200px x 400px but its being displayed in a 1300px wide container so i recalculated the height based on the wider size.
3. Thats correct – it should be 1px over the Customizer > Layout > Container Width. Below that size the image fills 100% of the viewport where the % padding you’re using keeps things responsive.
4. Yeah – not much we can do about that – Parallax is a bit of a pain, especially when you want to keep 100% of the image in view … it just don’t work. Its great if you have a much larger image then the container its being displayed in.
5. If those sizes are consistent across the site then you can create new CSS rules. For example you could create a rule specifically for posts:
@media(min-width: 1301px) { .single-post .page-hero { height: 445px; /* Adjust height to suit */ padding-top: 0; padding-bottom: 0; display: flex; align-items: center; } }And for pages you would use this
.page .page-heroselector instead1. I’ve added 2 sites here that both use merged hero headers and work fine without the use of the CSS snippet.
2 & 3: got it, with thanks.
4. No problem with that, only a few are left still using parallax and I tend to avoid this with most new designs anyhow.
5. That’s also good to know, great!
It seems that there is a problem with the homepage slider at the site I posted at initial message here as it doesn’t well resize on big screens and overlaps the menu above and content below. I should probably create a dedicated snippet for this but don’t well know which class to use. I tried adding this one .n2-ss-slider-3 but doesn’t seem to work.
You’re welcome.
Can you raise a new topic regarding the slider – when a topic is set to Resolved the system automatically removes any private information.
Hello,
Is it possible to re-open this ticket for an issue with the video header at a new site or should I create a new ticket?
Customer Support
Please create a new topic, thanks!
- You must be logged in to reply to this topic.
