Every featured article with 100% browser height?

  • flawless
    Inactive member
  • Topic Author
  • New Member
  • New Member
More
9 years 5 months ago #42422 by flawless
Hi,
I am using the Hot One Page template, and I want every featured article that shows in the front page to expand to the whole browser window. That is 100% width and 100% height of the window.
I can't manage to set the height to 100%.
After some googling I change the template_css.css and included the following:
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}

Inside the top article I have a div with the following style attributes:
<div style="width: 100%; height:100%; background-color: red;">
Hello World
</div>

But the article only occupies the required height to display its content...
See the following link:
fagaki.demos.my-portal.gr/demo4/

Can you help me?
Regards

Please Log in to join the conversation.

More
9 years 5 months ago #42430 by ivan.milic
You cant do that from css, here is script you can put add to bottom of: templates/hot_one_page/js/hot_onepage.js but I don't recommend it.


jQuery(window).resize(function(){
jQuery('.items-row .item').css('min-height', jQuery(window).height() + 'px');
});

jQuery(document).ready(function(){
jQuery(window).trigger('resize');
})

jQuery(window).load(function(){
jQuery(window).trigger('resize');
})

Please Log in to join the conversation.

  • flawless
    Inactive member
  • Topic Author
  • New Member
  • New Member
More
9 years 5 months ago #42434 by flawless
I've read about the "vh" metric in the height attribute
style="height: 100vh;" and I tried it, but they say it is not supported by all browsers/platforms.
But do you consider it a safer solution?

Regards

Please Log in to join the conversation.

More
9 years 5 months ago - 9 years 5 months ago #42444 by ivan.milic
That works on all modern browsers so no reason to wait any more, it is here from 2011. I recommend always using backup styling:

width:768px;
width:100vw;

so if browser does not support vw it will use 768px
Last edit: 9 years 5 months ago by ivan.milic.
The following user(s) said Thank You: flawless

Please Log in to join the conversation.

Time to create page: 0.312 seconds
Powered by Kunena Forum