Hi everybody,
I’d like the main video on my website’s homepage to expand to fill 100% of the viewport’s height, on whichever device it’s rendered. Currently, the strip which contains the video fills the screen when displayed on my laptop, but on a larger desktop screen (1980X1080) it only covers 1/3 of the browser’s window.
Already reached out to Wix support, and their response was that even within WIx Code, it is not possible to access or modify CSS elements of a Wix website (the main strip’s height property, for that matter). They said that the platform automatically resizes the element for best use in the platform on which it is being displayed.
In order to make a Wix website fully responsive, it’s crucial to add a feature that allows elements to fill 100% of the window, on ALL device types, like the example below: https://www.sevengramscaffe.com/
How did you manage to change font color? When I use code for color then 100% height stops working. I can´t find a way to have responsive height and desired color.
Very Nice !!
Too bad you don’t tell how to do an auto height of a strip !! I’ve looked everywhere in the documentation but cannot find how to do an auto height of a strip. Inline styling ??
@emandias I don´t think that is possible, as least with Wix in this version. If you use code from above on the text and put text on strip, strip will be responsive.
@rudjersimek Yes Ruder, I already tried it. I only hope that wix make it possible to change (inline) styles or at least give a strip an auto height. But for now this workaround will do.
It’s Javascript. The original code is right there in your browser’s developer tools. Wix even prints the names of the main two files containing site and page code to the console on page load.
In Editor turn on Dev Mode. Insert a text filed to the strip you want to be height responsive. Make sure that the top of the text box touches the top of the strip.
Copy the code given above to the code section at the bottom of the page. The final code after you copy will look like similar to this.
$w.onReady( function () {
//TODO: write your page related code here… var style1 = “vh;height:” + 100 + “vh” ;
$w( “#text25” ).html = “<” + “h1” + " style=" + style1 + “>” + $w( “#text25” ).text + “</” + “h1” + “>” ;
});
Make sure to change ‘text25’ to the actual name of your text box (you can see the text box name when you click it in the editor). It might be some other number like ‘text20’ or ‘text29’ or something like that. Maker sure to change name in both the places in teh code.
