Hero Image - how to fill the width of the page

General Help
1

How do I fit a Hero Image to stretch across the full width of the screen with no gaps?
Trying to replicate the no-gap image on the sample Neato evolve course.

image
image1913×972 98.3 KB

I’ve removed max widths on the following theme items:

  • Hero Image Margin
  • Hero Content Max Width

Changing the following page item doesn’t seem to do anything.

  • Hero image title and body container width

I’ve taken a look at a few items:

Here’s my page.

image
image1817×923 125 KB

1 Like
2

You need to make sure you PAGE max width is set to max too, that is found in your theme > Page tab > Layout and then you will need to change Page Max Width and Page Content Max Width.

Try that and let me know!

3

Thanks so much @hbailey as always, getting closer.
So I removed page max Page Max Width and Page Content Max Width and that has fixed the hero image. However, the latter has now caused issues with the content.

image
image1914×957 153 KB

I want the content to have a max width to ensure it fits on various screens, similar to the Amazon example from the Hub.

image
image1917×905 73.9 KB

However when I add back in Page Content Max Width it also reduces the hero image again. Am I missing something?

image
image1880×908 126 KB

Similar happens if I alter Page Padding or Page Content Padding for left/right.

4

You want to now set your ARTICLE max width to be the width you want the content. That will keep anything below the Hero image inline.

1 Like
5

PS the Amazon example is a page within Experience and not an Evolve page, but that effect can be replicated by doing what you’re doing :slight_smile:

6

Trying this but having no impact it seems.
Enabled Article Max Width
Also set the below to default:
Article Header Max Width
Article Title Max Width
Article Body Text Max Width
Article Content Max Width

7

Might I have a linky to the course builder for the course plz? :slight_smile:

9

Thanks @hbailey ,
Do I literally just share the url? Sorry :frowning:
https://tel.evolveauthoring.com/#/editor/618d5c4e1695ef098308e6df/builder

10

You do. I have superadmin powers so will only be me that can see it :slight_smile:

OK so you have a lot of article styles in place - you will need to update the article max width for the article element of all of those styles to get them to be the right width.

I have done that on the Content Article style for you - so if you go to the first page of your course now you will see that the articles are maxed at 1024 and the hero stays the same, as do the other article styles.

Article styles don’t cascade settings down from the main theme settings, so you will need to go to each one and add that max width. Hope that makes sense…

image
image903×510 70.3 KB

1 Like
11

Thank god those superpowers are on our side @hbailey
That’s completely done the trick now that I’ve applied to all styles.
So Theme Page > Theme Article > Article > Article Styles.
Thank you so much!
Course already looking so much better.

1 Like