Quote from luishp on November 12, 2025, 8:04 pm

Hi @phil78

A good responive design can be quite tricky.
It's an advanced feature. Please understand I can't review personal projects, but feel free to ask any questions.
Kind regards.

Quote from Phil78 on November 13, 2025, 5:25 pm

Hi @luishp

I understand, and that's why I didn't send the source directly.

I have a page that contains eight overlapping images. In the app, following an action, I bring another image to the foreground. In responsive mode, are the images one after the other outside the page?

In responsive mode, does the image no longer cover the entire screen?

Finally, when I create a neo-row container and put a neo-col-12 container (which contains objects without CSS classes) inside it,  the row container does not resize to fit its content?

 

Quote from luishp on November 14, 2025, 1:53 pm

@phil78 You’re touching a few subtle points of how VisualNEO Web mixes absolute layout with responsive layout, so let’s go one by one.

---

1. Eight overlapping images: what happens in “responsive mode”?

Short answer: nothing “magical” happens automatically. VisualNEO Web always positions objects absolutely unless you deliberately put them into a responsive grid using CSS classes like neo-row, neo-col-*, etc.

So:

• If your 8 images are just normal Picture objects placed with left / top on the page (the usual design mode), they will stay overlapped, even on mobile.

• They won’t suddenly line up “one after the other outside the page” just because you’re viewing the app on a phone.

They will appear smaller or require scrolling depending on screen size, but their relative positions and overlaps are preserved unless you:

• put them into a neo-row / neo-col-* structure, or

• change their CSS (for example, remove position:absolute and let flexbox/flow take over).

If you want to keep the “stack of images” look but be responsive, a common pattern is:

1. Create a Container that will be your “image stage”.

2. Give that container responsive width (e.g. width:100%; in CSS, maybe with a max-width).

3. For each image inside, in CSS:

   • position:absolute; left:0; top:0;

   • width:100%; height:auto; (or object-fit:cover; if you use it as background).

4. Use Actions or JS/CSS to change which image is visible or on top (z-index).

Then your images still overlap, but the stage itself can scale responsively.

---

2. “In responsive mode, does the image no longer cover the entire screen?”

It depends how you made it “responsive”:

A. Using FitAppToScreen

If you use FitAppToScreen (mentioned in the docs), VisualNEO scales the entire app proportionally to fit the screen.

• A full-page image will still visually fill the screen, just scaled up or down.

• This is “adaptive scaling”, not a true fluid layout, but it keeps your design intact.

B. Using the responsive grid (neo-row, neo-col-*, etc.)

If instead you’re using the Flexbox grid (neo-row / neo-col-12…) to make things responsive, then the image behaves like any normal responsive image:

• If you set width:100%; height:auto;, it will fill the width of its container.

• Whether it “covers the entire screen” vertically then depends on:

  • the image’s aspect ratio, and

  • the device’s aspect ratio.

On a very tall phone, the image might not cover the whole height anymore. That’s normal responsive behavior.

If you really want a full-screen visual in that case, it’s often easier to:

• Use a Container that spans the viewport (e.g. width:100%; height:100vh; in CSS).

• Set its background via CSS (background-image, background-size:cover;) instead of using the image as a separate Picture object.

---

3. neo-row + neo-col-12, but the row doesn’t resize to fit content?

This is a classic trap.

From the documentation, neo-row defines a flex row and neo-col-12 a column that spans the whole row.

In a pure flexbox world:

• A row’s height is determined by its content.

• A column’s height expands to fit its content.

• You don’t normally set fixed pixel heights on rows or columns.

But in VisualNEO Web:

• Every Container has a Height property in the Property Inspector (e.g. 400px).

• That becomes an inline style (height:400px;) and overrides the natural flex height.

So if:

1. You create a Container, give it class neo-row, and leave a fixed height (say 200px),

2. Inside it you put another Container with class neo-col-12 and several objects,

…then:

• The neo-col-12 will grow to fit its content,

• but the outer neo-row container might still be stuck at 200px,

• so you get overflowing content and the impression that the row “doesn’t resize”.

What to do instead:

• For your neo-row container:

  • Remove the fixed height value in the Position tab (set it to something minimal and then override), and/or

  • In CSS for that object, force height:auto; (and avoid specifying height in pixels).

• Let the grid handle height:

  • neo-row on the outer container,

  • neo-col-12 on the inner container,

  • no fixed height on either, unless you really know why.

Also make sure:

• The inner objects (Paragraphs, Images, etc.) don’t have weird position:absolute with negative top/left, or they might escape the normal flow and again not affect container height.

---

Very short “recipe” recap for your case

• Overlapping images + responsiveness

  • Keep them absolutely positioned inside a responsive-width Container.

  • Control visibility/z-index with Actions.

  • Don’t put each image directly as a flex column unless you want them stacked vertically.

• Image full screen?

  • For “scale the whole app”, use FitAppToScreen.

  • For “true responsive full-screen section”, use a 100vh Container with a CSS background image (background-size: cover).

• neo-row not resizing

  • Remove fixed pixel height from the row Container.

  • Use neo-row + neo-col-12 and let flexbox + content define the height.

Quote from Phil78 on November 15, 2025, 7:25 pm

@luishp

Thanks, it's all really complicated, but I'll try to figure it out with your very thorough answer.
Just one more question: in my basic application, I use fitAppToScreen if device = mobile, but it doesn't do anything. Does it only work if responsive is checked in the application properties?

Quote from Phil78 on November 18, 2025, 8:22 pm

Hi @luishp

I managed to do something decent, but there is one point I still don't understand. There is a white border when I put the application on the phone that I don't have in VNW. But this border, which I used to see on the computer when I simulated the size of the phone, has disappeared. So I thought the problem was solved.
How do I remove these margins to get a full-screen image?

Quote from kajanken on November 18, 2025, 9:57 pm

Just a little side note here about building responsive pages in Neo.

If you use VisualNeo built in objects I do not why but if you use in your main container both classes: container and neo-col and then further on  neo-row(s) and neo-col(s) you see in my opinion better responsive behavior. And you must enable in Project properties in Size tab responsive option.

On the other hand if you code your own bs3 code and just paste it to VisualNeo container it will work with bs3 classes out of box using bs3 container class. But in this case it is better to use some ide to build the html and then just paste the hole code at once to VisualNeo container.

Quote from Phil78 on November 20, 2025, 7:04 pm

Thanks @kajanken

I abandoned the reactive option because it was too complicated, but in any case, this option generates also margins as I showed in the image.