Topic: How to get a full width and height hero image, like the Theme.co site?

Tagged: x

Author

Posts
June 16, 2016 at 6:30 pm #1046084

dbonneville
Participant

Hi! How do I get a full width and height hero image with text on it, just like theme.co has right now?

http://prntscr.com/bhbov5

My site has a navigation header at the top. Can the rest of the remaining space be calculated and filled up just like this? So that when the user scrolls, the rest of the content of the page starts to show?

Doug

June 16, 2016 at 6:31 pm #1046088

dbonneville
Participant

Whoops. To see what I have right now, go to:

http://labs.oxbowseo.com

There is one site on demo there for a client.

June 16, 2016 at 11:08 pm #1046476
Rue Nel
Moderator
Hello There,

Thanks for writing in! The example url is a custom design which is not from Cornerstone. You can do the same in your site. please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS
```
#x-section-1 {
    min-height: calc (100vh - 267px);
    max-height: calc (100vh - 267px);
}
```
We would loved to know if this has work for you. Thank you.
June 21, 2016 at 10:14 am #1052674

dbonneville
Participant

Does it matter what element I’ve used, or is the #x-section-1 based on my site as you saw it (assuming you visited the link and made the suggestion based on what is there)?

Thank you.

June 21, 2016 at 12:05 pm #1052844

Nabeel A
Moderator

Hi again,

The above CSS is based on what you’ve on your site. CSS is applied based on the element used.

Hope this clears!
Author

Posts

<script> jQuery(function($){ $("#no-reply-1046084 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>