Adaptation to viewport size
Good morning.
Here is my page on construction:
http://www.irenedissenya.com/chinese/
As you can see, this is a one page style web.
I want to control the height of the page. It must adapt dynamically to the viewport size when a user resizes his browser.
It's specially important for the home page.
I need to control that everyone sees the same on this page.
If there is an image, you must see the whole height (whatever the size of your screen).
Do you understand my question?
Thank you very much.
Here is my page on construction:
http://www.irenedissenya.com/chinese/
As you can see, this is a one page style web.
I want to control the height of the page. It must adapt dynamically to the viewport size when a user resizes his browser.
It's specially important for the home page.
I need to control that everyone sees the same on this page.
If there is an image, you must see the whole height (whatever the size of your screen).
Do you understand my question?
Thank you very much.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
I know what You want to achieve.
To do this with simple image - You would have to do some html/css tricks or play around with jQuery scripts.
You can try to do it with Revolution Slider, set in in fullscreen mode and place in slides images You want.
All the Best.
By the way, I've been trying it with de revolution slider and i can't resolve at all.
Here is the test (http://www.irenedissenya.com/chinese/prova-revolution-sliders/)
Please, help me.
Thank you very much.
yes - of course I'll help You, but please be patient. You're requesting for custom work, and it's not that trivial, even though it seems so.
All the Best.
I've been trying to fix this and I have not gotten any way. So I panicked.
I appreciate your help very much. Sorry for the rush!
after some investigation it turnes out that thing you are requesting is within Adamant's capabilities.
complete how-to:
1. create new empty row in page edit panel and click pencil icon on the top right conrner to edit it
2. put 'background_contain' inside 'Extra class name' field,
3. click 'Background image' and select an image You want to display,
4. set 'Background position' to middle center,
5. check the 'Fill viewport?' parameter
6. save row and save page changes.
7. go to Adamant Options >> Custom Styles and put this:
.background_contain{ background-size: contain; }8. save changes, check the page now.
should work
All the Best.
But it seems that this does not work for me :-(
I followed your steps and page seems to fit... but I still can't see the entire image on the home page.
You can check this here (http://www.irenedissenya.com/chinese/responsive/)
I think we are close...
please go to Adamant Options >> Custom Styles, delete previous definition and put this:
.background_contain { background-size: contain; height: 90vh; padding: 0 !important; } body.page #col-mask{ padding-top:0; }All the Best.