Why does not scale under 480px?

[manuel_songokuh]

hi

i find strange:

i testing to change screen in firefox: from 1920 to 360 but from 1920 until 481 yes scalable visible.. but under than 481 is stop to scalable.. why?
where i can change scalabe to 360..i dont find this configure...

[alan_sh]

You will need to put up a link to the project file (.wbs) so we can see what you may be doing. Make it a simple one with just enough to show the issue.

Alan

[manuel_songokuh]

ok
https://testing.yana.lol/antimo/1/manuel/Desktop.zip

[BaconFries]

You haven't said what "Layout Mode" you are using? When posting you need to be more "Specific" in what you are trying to achieve. Have you read the link provided by Pablo including part two. In part two it shows an "Example" plus a demo project plus an "Extra" 10 layouts that you can use or to help you get start each should show how it works. Note I now see you have posted a demo project as requested but you should still read from the urls.
https://www.wysiwygwebbuilder.com/flexgrid_part1.html
https://www.wysiwygwebbuilder.com/flexgrid_part2.html

[Pablo]

https://testing.yana.lol/antimo/1/manuel/Desktop.zip

The link does not work for me. Are you sure it's valid?

[manuel_songokuh]

now link is words.

[Pablo]

You have used fixed size columns in the flex grid so obviously the layout will not scale.
Why would you want to use fixed columns a flex grid?
In my opinion you are overthinking this. Just keep the default settings and your layout will be flexible by design.

[manuel_songokuh]

i use lotties many, so page need to scale so i dont use responsive RWD. so i need this my finish job make it scalabe follow by width of viewport, wwb i don;t find the solution..

see example scalable works:
https://yana.lol/

firefox tool dev: maiusc+shift+m for change viewport see result works scalable but wwb i don't find..

so i did open other topic for scalable, all you reply me same things: RWD.. this is not solution for me.. so i need other solution.. understand?

[Pablo]

If you want a flexible layout then your approach is wrong.
You should not use fixed width columns.

WYSIWYG Web Builder support several ways to implement responsive layouts
- layout grids (scalable)
- flex container (scalable)
- flex grid (scalable)
- fixed/absolute layout with breakpoints

The layout you are referring to uses a custom code. There is no way to implement in a visual web design tool.

[crispy68]

I'm not sure what your example link is supposed to show. I see the entire site shrinking to a point you can't read any text, the menu is too tiny, etc. Not sure why you would want this as it looks terrible.

[manuel_songokuh]

i'm interested this mode, page scalable 1920 width, (16:9). this is for desktop and NOT mobile (smartphone).

RWD is not choise for my design.
- layout gird good for me but i don't like for (x1 until x12 like as percentuale)

see my page testing:
http://testing.yana.lol/antimo/1/manuel/index1.html
this is good scaleble , see screen record:
https://mega.nz/file/qxt0laAa#s25uwJ_kl ... c1YtKTPj0A

did you see screen record, that scalable under than 480 is stop scalable.. i want to ask you why?
i wish scalable until stop to 360 how..??


other thing: flexgrid for me: it is good but i did try that is not scalable screen change...
http://testing.yana.lol/antimo/1/manuel/index.html
- first is layoutgird (yes scalable but size is not precise to 1920 because layoutgrid used by x1 until x12 column = divide nothing unit pixel..like as 2 column = 50%+50% this is percentage

- second is flexgrid (not scalable..i don't know, not work)
-third is static (size is precise 1920)

please dont to say me to repeat me: flexgrid, layoutgrid, i know these , but these are not choise for my design..okay?

i did open other topics:
viewtopic.php?p=501619#p501619
viewtopic.php?p=501579#p501579

[BaconFries]

please dont to say me to repeat me: flexgrid, layoutgrid, i know these , but these are not choise for my design..okay?

You keep mentioning scalable so do you or do you not want to be able to view on a screen size of 320 or not??? Then at sometime you will need to use RWD (means scalable) to do so. So yes we are going to say you will need to either use Layout Grids, Flexgrid or even Breakpoints
WYSIWYG Web Builder support several ways to implement responsive layouts
- layout grids (scalable)
- flex container (scalable)
- flex grid (scalable)
- fixed/absolute layout with breakpoints
With the last one mentioned you create Breakpoints for each size you wish to use. Within each breakpoint you add the same content(s) and you adjust accordingly the end result will be RWD or scalable.

Take a look at the following video please don't say it old and not for WWB20 the method for creating "Breakpoints" is the same as it was then as it today. Note the video shows its contents going to 320 just as you want!!

https://youtu.be/ojocCQpHLh4?feature=shared

https://youtu.be/0f7L2yPNDb8?feature=shared

[manuel_songokuh]

Hi, did you see https://yana.lol/ with change screen or maius+shift+m (Firefox)?


Did you see this:
http://testing.yana.lol/antimo/1/manuel/index1.html
I add layout Grid, flexgrid, static and did you try change screen or maius+ahift+m?

Something not work scalable...?
.

[AliGW]

I am very confused about your issues, but when I view that second link on my iPhone SE, which has a viewport in portrait mode that is 320px wide, the page scales down to fit the viewport. The first link does not.

[Pablo]

@manuel_songokuh

Your demo is not scalable because you are using fixed sizes. A layer is not flexible/scalable.
Also, a flex grid with fixed columns (pixels) is not flexible. It will have a fixed width.

In other words, if you want a flexible / scalable layout then:
- use layout grids.
or
- use flexbox
or
- use flex grid, but not with fixed columns

- do not use layers, they are for absolute/fixed layout.

Here's a demo with your Lottie files
https://wysiwygwebbuilder.com/support/lottie-scale.html

[manuel_songokuh]

pablo, i did see yout demo maybe i'm not explain good, so now i show you same you demo:
https://testing.yana.lol/antimo/1/manuel/pablo-1.html

lotties has own size native need to put in a area for scalable :
layoutgrid is not good for the size of lottie will be native size..

i wish lotties put in an area for scalable...i don't know what is good find solution..

[Pablo]

The content either scales or not (= fixed).
If the content of a web page is scaled, the Lottie animation will never appear in its original size because the browser window varies for each visitor and does not have a fixed dimension.

In my opinion, you are overthinking this. My advise is to keep it simple.

[manuel_songokuh]

sorry me, i want this mode:

first: lottie size 210px
second: lottie will put in an AREA (for scalable)
third: lottie can resize for me is ok but important AREA scalable follow viewport of each visitor

instead your demo:
layout grid: can scalable for viewport but lottie size is wrong..

so i did try flexgrid: i fixed 210x so i can add file lottie size 210x but flexgrid will be scalable for viewport so lottie will can scalable..
see here:
https://testing.yana.lol/antimo/1/manuel/pablo-2.html

[alan_sh]

You are trying to mix scalable and fixed and you can't do that.

It's eaither scalable, in which case it resizes according to the screen - or fixed, in which case it's the same size, no matter what screen it's on. And if the screen size is smaller than the fixed artifact, then you only see some of it.

This is not hard - but you can't have it both ways unless you use breakpoints and accept different methods in each one. For example, on breakpounts over 768, you could have fixed resources as long as they were never wide than 768. On breakpoints under 768, you hide those fixed ones and create new ones that fit in (say) a screen of width 320. But this is very messy and means a lot of maintenance. Which is why eveyrone uses layout or flex grids.

Alan

[wwonderfull]

i use lotties many, so page need to scale so i dont use responsive RWD. so i need this my finish job make it scalabe follow by width of viewport, wwb i don;t find the solution..

see example scalable works:
https://yana.lol/

firefox tool dev: maiusc+shift+m for change viewport see result works scalable but wwb i don't find..

so i did open other topic for scalable, all you reply me same things: RWD.. this is not solution for me.. so i need other solution.. understand?

Nice animations on the website. This same website could have been done much easily and responsively even using flex grids with all the animations. and even the menu. Web design is about tricks that is the reason wysiwyg web builder was made. you have to modularize the animations, and all the graphics and same website can fit in a responsive frame.

But with absolute layers responsive framework on mobile is absolutely not possible as everyone has confirmed.

[manuel_songokuh]

see here example

https://pasteboard.co/8xoD7te42IU5.png

i'm not interesed for mobil and smarpthone, because my target is desktop, NOT MOBIL, NOT SMARTPHONE, clear?

i wish with wwb, i dont find solution..help me..please..

[BaconFries]

i'm not interesed for mobil and smarpthone, because my target is desktop, NOT MOBIL, NOT SMARTPHONE, clear?
i wish with wwb, i dont find solution..help me..please..

First there is no need to be rude!!! every reply to you has tried to help you why should help be provided when you are being rude!!!

I have temporarily locked this till Pablos reply.

[Pablo]

Can you please tell me how your image is different than my example?

https://wysiwygwebbuilder.com/support/lottie-scale.html

You wrote:

instead your demo:
layout grid: can scalable for viewport but lottie size is wrong..

However, as far as I can tell your example image also scales the lottie files to the full browser width.

[manuel_songokuh]

for BaconFries: i'm not RUDE... maybe you are wrong think of me.. not problem..

for pablo:
https://wysiwygwebbuilder.com/support/lottie-scale.html

can send me you lottie-scale.zip? so we can share fix it..or not?

you lottie-scale.html is not correct.. i try to explain you, canvas size is 1920px , lottie have 3 file:
1 file 210px
2 file 1100px
3 file 210px
total: 1520
add 400px for space empty
total: 1920 this is canvas, canvas can scalable like responsive

canvas is example for explain to you, canvas can give me space for my stuff: lottie, text, menu and finish job and canvas will block all items for responsive.. this is for many job for museum,site show,etc interactive, i need this tecnhical..

your demo lottie-scale.html has bad size of lottie because follow grid unit is ft or %...
did you see link: https://testing.yana.lol/antimo/1/manuel/pablo-2.html see above it is layout grid and below size of lottie is original size..compare to lottie-scale.html is not same size of original, because lottie is designed for 1920, lines thickness are all same size..

note: i'm not rude..nothing...i write like explain and i'm not good english..okay?

[Pablo]

What do you mean by 'native size'?

The lottie animation cannot be flexible and have a fixed size at the same time. An object it is either fixed or flexible.

210 x 1100 x 210 = 14% x 72% x 14%

If you resize the browser window width to 1520 pixels, then the columns will have those exact sizes.

If you want extra free space then add extra columns with no content.

In your example image, the lottie animation is also flexible (not fixed), because how else would it fill the entire 3840px width?

[crispy68]

I've been following this thread and still a bit confused on what you mean by you want it to scale but at same time stay its native size. The demo that Pablo provided does scale which is what you want. However, am I safe to assume that what you mean is you want the spacing below the 2 smaller lottie images to stay the same as it scales?

In Pablos example, you will see that the space below the image increases as the screen is reduced:

See space below lottie circled:




Are you trying to maintain this spacing to be the same as it scales?

[manuel_songokuh]

sorry i'm wrong calcular width..sorry i write again:

you are right for calculator
210 x 1100 x 210 = 1520px so 14% x 72% x 14% = 100%

this is my wrong.. now correct :
410 + 1100 + 410 = 1920 so flexgrid: 21.354% + 57.292% + 21.354% but this not work for flexgrid unit decimal point...
but issue is that 410 (first column) and i add lottie (size native 210px) result follow 410 like effect "stretch"..
now i did update demo:
https://testing.yana.lol/antimo/1/manuel/pablo-3.html

so my theory: that first column (if i choice 410px) so i can put lottie but i can decide position x,y in area of first column and keep it position and size of lottie..render in html flexgrid will can responsive but lottie can scale (not stretch) and keep position..like that last link
this is perfect for me..

for me good idea: that LAYER (wwb) can add available: responsive or scalable? this is perfect..or i add html for LAYER: custom..? css..?

sorry me again for i'm not good to explain and english..

[crispy68]

Is this what you are after?

demo

UPDATE: after seeing your last post, this doesnt look like what you want. Up to now, it has not been clear that you want spacing on the left and right of the 1st and 3rd lottie as the screen decreases. None of your examples showed this at all.

[manuel_songokuh]

]crispy68: see here
https://pasteboard.co/b0Y0fjDe5iUd.png

Is this what you are after?

demo

UPDATE: after seeing your last post, this doesnt look like what you want. Up to now, it has not been clear that you want spacing on the left and right of the 1st and 3rd lottie as the screen decreases. None of your examples showed this at all.

yes i'm wrong to explain.. then did you see https://testing.yana.lol/antimo/1/manuel/pablo-3.html
there are 3 example in link, that third example: that i want..

i think maybe i can add HTML CUSTOM:
-LAYER: make it scalable or responsive..or (add CSS configure? body to width:100vw?...?)
-PAGE HTML: add new function Responsive? or (add CSS configure? body to width:100vw?...?)

Or ADD NEW FEATURE:
-FLEXGRID: add 1) decimal point for percent 2) free of position x,y for object: image,text, menu-css, lotties,video,etc.. 3) keep original size of objects ? or
-LAYER: new responsive = scalable? or
-PAGE HTML: new responsive = scalable? or

[crispy68]

Is this what you are after?
Demo

Or ADD NEW FEATURE:
-FLEXGRID: add 1) decimal point for percent 2) free of position x,y for object: image,text, menu-css, lotties,video,etc.. 3) keep original size of objects ? or
-LAYER: new responsive = scalable? or
-PAGE HTML: new responsive = scalable? or

You can't make flex grid free of positioning x,y, etc. as it uses Flexbox for positioning. You are not going to be able to stack lotties on top of lotties. Layers are not meant to be used for flexible layouts (as previously stated many times). Layers do allow for stacking of content but the objects will have a fixed position and size. For it to work on smaller viewports, you have to add breakpoints to reposition/resize the objects for that viewport. However, this technically is not fluid/responsive design. Page HTML has nothing to do with making it responsive/scalable. The body/html is already 100% width and the height is only as tall as the content on the page is.

An object cannot keep its original size and also be flexible. That make no sense. You can make objects flexible and have a max-width where they won't get bigger than a certain size but will shrink when the container gets smaller than the object width. This is demonstrated in my demo above.

The 1st and 3rd lottie are 210px with equal spacing on each side (100px). The 2nd lottie has a width of 1100px.

[manuel_songokuh]

i try to show you for understand and clear:
https://sendvid.com/ph05c5mj

[crispy68]

So you are wanting the white space in between to always be there and scale also?

Is this what you are after?
DEMO3

[manuel_songokuh]

your last demo: maybe YES...
i'm little shock.. wow... i wish to testing this your demo.. you can explain me or send me demo.zip?

update:

can i choose to free position of objects in flexcontainer?

[manuel_songokuh]

https://imgbox.com/6iexmA3B
example: more object in first column...in flexconteneir ?

[crispy68]

No. You cannot freely place objects in a flex container as it uses flexbox properties.

[manuel_songokuh]

ok, damn...

do you have other ideas solution..?

nothing layer, layout grid, flexgrid, flexconteineir.. but static page can responsive in html custom? or add code in PAGE HTML?

can layer inside the flexcontenier?

Pablo: do you understand this case?

[crispy68]

The problem you are going to have is the page you are trying to emulate, many of the absolute positioned object's widths are specified as: 20vw which is basing the width on the width of the browser screen. There is nothing in WB that will allow you to do this that I'm aware of. The site you are trying to emulate was probably hand coded to do this.

[manuel_songokuh]

The problem you are going to have is the page you are trying to emulate, many of the absolute positioned object's widths are specified as: 20vw which is basing the width on the width of the browser screen. There is nothing in WB that will allow you to do this that I'm aware of. The site you are trying to emulate was probably hand coded to do this.

ok, last, i ask to you: where i can find in google keyword for my solution? example:
page scalable or page responsive or..page in vw? i can't find it keywords to search..

[crispy68]

Using vw/vh units in this way seems very unorthodox to me. I know you mentioned not caring about mobile and only desktop, but it seems if you ignore mobile you will be ignoring a large client base. You will also be dinged by Google for not having a mobile friendly site. If you google using 'vw units CSS' or something similar, you will find stuff about it. ex: https://www.w3schools.com/cssref/css_units.php

Keep in mind, you will need to use percentages to position objects from the left/right/top side of the browser. You can initially set it up in WB but you would need to add a lot of CSS code to override the code WB generates to achieve this.

I was able create a demo using a floating layer but had to add extra CSS to override the generated CSS by WB. This is because when objects are placed in a layer, they will have a fixed position and size and because of this will not be responsive. For each object you will need to calculate the left/right position using percentages, top position using vw units and set the width to use vw units.

So, yes it can be done but depending on how complicated the layout, this could get very tedious. Good luck...not a task I would want to mess with.

DEMO

You can download the project file HERE. (it is a WB20 file)

It is your original file. In the project file, the 'index' page was my original attempt using a flex container. Refer to page 'index4' to see the above demo.

[BaconFries]

The following urls will explain its use and its definition. You already have an example the url you provided just view the source code for how it was implemented.
Note WWB is not A HTML Editor but a HTML Generator so you won't be able to directly use in the software itself but you would need to manually edit in the likes of Notepad++. The downside of this if you open the page in the software again all the manually added code will be overwritten. Also there is no support on this you will need to understand how to use yourself.
https://www.sitepoint.com/css-viewport- ... ick-start/
https://web.dev/blog/viewport-units

[manuel_songokuh]

You can download the project file HERE. (it is a WB20 file)

It is your original file. In the project file, the 'index' page was my original attempt using a flex container. Refer to page 'index4' to see the above demo.

please you can save in old version 19wwb? thank you

[Pablo]

For continued support, please consider upgrading. We dedicate significant time to assisting you.

[manuel_songokuh]

ok i did update and payed 20wwb.

thank you to crispy68 for DEMO, that is LAYER wow!!!!
..but not work for text, menucss?...

for pablo: can add new little feature function:
- flexbox [flex] flex basic >> can add convert to VW calculated ?
- can generator for css style for vw responsive? crispy68 has code:

Code: Select all

<style>
#wb_Lottie1{width:10.9vw !important;left:5.2% !important;}
#wb_Lottie2{width:57.3vw !important;left:50% !important;transform:translateX(-50%);}
#wb_Lottie3{width:10.9vw !important;left:auto !important;right:5.2% !important;}
#wb_Lottie4{width:7.0vw !important;left:10.4% !important;top:12vw !important;}
#wb_Lottie5{width:4.8vw !important;left:auto !important;right:14.0% !important;top:12vw !important;}
#wb_Lottie6{width:4.8vw !important;left:auto !important;right:2.6% !important;top:12vw !important;}
#wb_Lottie1,#wb_Lottie2,#wb_Lottie3,#wb_Lottie4,#wb_Lottie5,#wb_Lottie6{height:auto !important;}
</style>

maybe future can add new little feature?

text, menu-css, can work in layer(floating)? i did tested maybe not work.. can check it?

[Pablo]

for pablo: can add new little feature function:
- flexbox [flex] flex basic >> can add convert to VW calculated ?

This is not a easy as you make it sound. It is not a 'little' feature.
It may work in this specii situation. However, WWB has thousands of options and millions of possible combinations. To make these all these options work with vw (if this is even possible) may be month of work.
I am not sure if this will be worth all the time for a feature almost no one is going to use.

[crispy68]

My demo was to just make the lotties in your demo work. There was no mention of adding menus, text etc. However, it could be done just like I did with the lotties. You would have to manually add CSS to control the placement of these objects.

The issue is, this is very complicated stuff to code this way and not a normal way of creating a website. As Pablo stated, this would require a lot of time on his part to create something that would do this (if even possible since would require a lot of testing). I'm not sure many users would use it considering that when it gets down to mobile view, your site is unreadable and just doesnt look good.

You stated:

i'm not interesed for mobil and smarpthone, because my target is desktop, NOT MOBIL, NOT SMARTPHONE, clear?

With that being the case, most users would not find this useful and, from a product marketing standpoint, this would not be desirable as the whole point of the software is to build effective responsive websites for all devices. This sort of defeats that purpose. Not sure it is worth his time to dedicate any time to this.

[jerryco]

RWD.. this is not solution for me.. so i need other solution.. understand?

manuel_songokuh, I am not a programmer. But I believe in what Pablo has made. I think it can do almost anything already.

Please try to understand how WWB 20 works the way it works. If you have technical insight (I do not) maybe you can achieve far better results than improvisation by trying to change WWB.

[wwonderfull]

There is a base of principals which wwb follows to make standard responsive web-design and it adheres to that framework and principals. What you may be asking is equal to custom code if I am not wrong which wwb does not provide any service for. But out of voluntary aid people such as @pablo, @crispy68, @baconfries and others have provided you AS IS in a voluntary way now asking too much out of them would not be appropriate for their time and effort.

Even with perfect pair of eyes it is difficult to see menus for some people, yet we use large font size but, on your website, if menu bar shrinks in such level that you would need a magnifying glass to see the menu button texts then what would be the purpose of web designing; But having art and animation is fine but change the technique on how this same art can be adjusted for smaller devices even if you have to do it in a way which may not show the full jungle, but you can at least see the tree with some coconuts on them.

I had previously mentioned that this design is gorgeous I would have liked to work on this on a responsive level but in terms of absolute layers I would never waste my time on a website which is not responsive because that is the reason web development introduces flexible display properties. Or else you and I still would be watching television on mobile and if we apply the same absolute yet responsive layout then TOM the cat would look like a rat and JERRY the rat would look small as an ant.

You cannot see the world from the window, but it at least shows like an absolute picture bound in a frame.

[manuel_songokuh]

ok.

i'm worng to ask people: @pablo, @crispy68, @baconfries, other people... for lose your time and tired and effort.

ok: not add new feature.

ok: i will not to ask for aid, help, suggest..

last tell: thank you for your time, i'm sorre for my stupid to ask here, maybe i'm rude if people think that i'm rude so i say sorry everthing.

good day all you.