Responsive resize elements on mobile devices (portrait)

1

I have been trying to adjust the html extensions and intro ‘splash screen’ size for different size viewports. I know they automatically adjust to smaller screens with vw and vh but any code I add to adjust the layout or remove elements when the screen is portrait hasn’t been working. Is it something that is possible within shapespark? Has anyone done it effectively?

1 Like
2

@sachaandraos, could you share the URL to the scene with customized elements?

3

Yes,
https://sachaandraos.shapespark.com/movimento_space_ceppo_di_gre/
Click any of the top text elements to close the splash screen.
If you use the preset view - Room 1, there is a html extension linked to the sofa on the left.

Examples of the problem:
The top left menu at that size is barely usable on my phone.
The slideshow within the sofa html extension is very large on the computer and barely visible on the phone, I would for instance center the whole thing.
It would be good to have a slightly different splash screen for mobile use

Another issue i’d love for you to look at because its driving me crazy is when I click the first arrow in the slide show of that sofa, the entire window shifts up 5px leaving a small black bar at the bottom. In portrait mode this looks like more than 5px. I cannot figure out why it is happening or how to change it.Is it something you’ve seen before?

Thanks Wojtek, great software overall

4

Just to add to the final point. I have tested the code online and with JSfiddle and it seems to be working fine, so must be an issue within shapespark. Also tried adding a body{position:fixed;} into the code and it didnt change anything

5

@sachaandraos, have you tried using CSS media queries to differentiate element sizes depending whether the site is opened on a small, medium or large screen? For example:

@media all and (max-width: 600px) {
  .top-left-menu {
    font-size: 20px;
  }
}

As for centering the HTML label pop-up, this is something we’d like to add in the near future.

Have you solved the issue of the window shifting up a bit? I cannot reproduce such behavior?

3 Likes