Make an element disappear at certain window sizes

Ask the community
,
1

I have a fixed element on my page that really helps the user navigate my site. On certain smaller computer screens this box covers other text and can make some parts illegible. I would love to keep this fixed element on my page… Is there some kind of code I can put in for a certain (smaller) window/viewport width that makes the element disappear?

2

If you are doing your site on Editor X, you can just hide the element from the smaller breakpoint.

Otherwise, you can set by code.

3

It isn’t on Editor X. But yes I would love to hide on a smaller breakpoint via code!

4

Then you have to define 3 breakpoints by code, using the formFactor API.

Take a look at this!

5

It doesn’t seem to be working with API. I guess because it isn’t actually a tablet, it’s just the viewport being bigger or smaller than others. I am thinking I need to use some kind of hide function when the window hits a certain break point… I’m just not code savvy enough to know how to get this to happen.

Maybe something like:

if (windowWidth > 1280)
{ $w(“#element”).hide();

Or something to do with:

wixWindow.getBoundingRect()
6  .then( (windowSizeInfo) => {
7    let windowHeight = windowSizeInfo.window.height;      // 565
8    let windowWidth = windowSizeInfo.window.width;        // 1269
6

@karacraig15 I never used, but I guess you could do something like this:

import wixWindow from "wix-window"

$w.onReady(async () => {

    let windowSizeInfo = await wixWindow.getBoundingRect()

    let windowWidth = windowSizeInfo.window.width // 1269

    if (windowWidth < 1280) {
        $w("#element").hide()
    } else {
        $w("#element").show()
    }

})
7

@bwprado
Just a little addon to Brunos suggestion.

At this code-part you perhaps should use a console.log

let windowSizeInfo = await wixWindow.getBoundingRect();

…like this…

let windowSizeInfo = await wixWindow.getBoundingRect(); console.log(windowSizeInfo);

Why? → Because Bruno surely did the same to get → .window.width
which you need in the next coding step. Else you would not know how to get the right value.

let windowWidth = windowSizeInfo.window.width

…or you take a look into the VELO-API…

Ok, Bruno just looked into the API-DOCs :wink: