100VW & 100VH - Post ID 262822

User 450830 Photo


Registered User
148 posts

In RSD I can do a div 100% full screen width and height.
I would also like to apply at RCS 100% full screen width and height. Is this possible
groet,

Ger van Veen
http://schilder-vanveen.nl
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Hi Ger,
Have you given it a try. I think there were some other users trying it and they placed the RCS inside a row on RSD.
Obviously the proper width setting will be need.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
4,782 posts
Online Now

Ger van veen wrote:
In RSD I can do a div 100% full screen width and height.
I would also like to apply at RCS 100% full screen width and height. Is this possible


have you checked out the template in RCS "Art Explosion" maybe thats what you are after, have a look and see what the settings are
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 450830 Photo


Registered User
148 posts

Thanks Eric and Wayanjaya

It is not about the in width, that's easy.
The problem is that I want full screen height, and that it adjusts automatically.

In RSD you have the opportunity: 100 Height%
This I do not back into RCS.

My question is, here is an opportunity for
groet,

Ger van Veen
http://schilder-vanveen.nl
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Hopefully RSD and RLM will support vh and vw soon. I guess an override style sheet will be needed.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
4,782 posts
Online Now

I suppose one other problem would be the image size to take into account, you would probably have to have a lot of different size images to allow for the different heights, or you would have to do an awful lot of positioning to ensure the best view of the image at different sizes is achieved.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts

I think what is holding CC back from implementing vh and vw and all those, is the lack of browser support. IE and Edge are not quite up to it yet.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2666911 Photo


Registered User
12 posts

Hi Ger, I was looking for a similar solution, not sure if it's what you want but I managed to make a 100% height and width RCS buy putting the HTML inside a 100% height row and column in RSD, then applying 100% height to every child element in the slideshow using an override css file.

Example here:

http://www.ptnsystems.com/yourwebsite/

Not sure how long this will be live though as I use this site for development purposes so here's some longhand css which may help explain:

body > .row.ROW-CLF.SLIDESHOW
{height: 100%;}

.html-element.slideshow-header
{height: 100%;}

.slideshow_container .slides_container
{height: 100%;}

.slideshow_container#slideshow-homepage .slideshow.slideshow-1
{height: 100%;}

.slideshow_container.slideshow-container-1#slideshow-homepage
{height: 100%;}

.slideshow_container#slideshow-homepage > .slideshow .slider-container.container-clf
{height: 100%;}

.slideshow_container#slideshow-homepage .slides_container > .slide.slide-1, .slideshow_container#slideshow-homepage .slides_container > .slide.slide-2, .slideshow_container#slideshow-homepage .slides_container > .slide.slide-3
{height: 100%;}
User 2666911 Photo


Registered User
12 posts

Update to my previous post, if you have no child elements that need explicit height you can use something like this as well:

body > .row > [class*='coffee-span-'].col-slideshow * {
height:100%;
max-height:600px;
}

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.