Studio Hours - Responsiveness Recap: Questions and answers

Hey everyone!

Last Wednesday - 29th November - we had our first Studio Hours, a space for the community to gather and spend time with each other - working through questions, being there for each other! It was an incredible time, with 59 community members joining to share their knowledge and learn from one another.

As one person said, there was “Lots of talent in this room!”, and we want those who were unable to join us to benefit from the discussion and conversations had.

But before we do that, take a look at the details for our next Studio Hours.

Right, let’s get to the questions and answers:


In Wix Studio, using the Repeater Slideshow, is it possible to have pagination dots?
While not currently available out of the box, it is possible using some code. This tutorial, recently shared in the community walks you through the steps needed to create this - https://www.youtube.com/watch?v=uH3J7eD451o


Coming from Editor X, I don’t understand cells and their benefits over a grid system. I delete them as soon as I can.
The Section Grid adds a “layer” over the CSS grid, making the creation of complex layouts easier. For example, if you need a section split into a ⅔ ⅓ layout, you simply split the section into 2 cells and arrange them into the layout you want. What’s more, you have access to shortcuts, such as swapping cells, all without the need to know CSS measurements.

If you prefer using CSS grid, that’s okay.

This article explains the differences in more detail - Studio Editor: About Cells and Grids | Help Center | Wix.com


What is the best way to get the Responsive AI Section to work? From my experience, it didn’t give me a good layout.
The Responsive AI is currently in beta, and we’re working towards improvements in this area. Although it might seem a little unintuitive, the recommendation is to start on the desktop breakpoint and put elements on a section without using any layout tools. No cells, no stacks etc. The Responsive AI will then scan the layout and apply layout tools like cells and stacks. Try it and let us know how it works for you - Responsive AI - Wix Studio Community forum.


When will it be possible to move my Editor X site to Studio?
It’ll soon be possible to move your Editor X site to Studio. We’ll have more information to share in the coming weeks, but for the latest information about the move to Studio, take a read over this topic - Community update: what’s next for Wix Studio


Is there any information that can be shared about how selling templates within Wix Studio is going to work?
When we’re closer to the launch of this feature, we’ll share more details about how it’ll work. In the meantime, follow this feature request - Wix Studio Request: Selling Your Custom Templates | Help Center | Wix.com - to keep up to date with when Selling Your Custom Templates becomes available.


Are things like NPM packages available in Wix Studio?
Yes. While there are differences in the developer experience in Wix Studio - using a VSCode Online based IDE - the core features like NPM are still available.


When designing across breakpoints, it looks good on my smaller screens, but how do I stop issues on larger screens, such as my 27-inch Mac? Are there any best practices?
There are a few different approaches. For example, creating larger breakpoints when you start designing. This allows you to specify at which points the design changes.

Alternatively, you can use the advanced sizing options to set a “Max Width” measurement to prevent something from growing too big.


When should you use a Stack vs a Container?
In most cases, they’re fairly interchangeable, especially now that you can stack horizontally too.

Containers are good for when you need more complex layouts. Or, for example, you need the same elements, but different layouts per breakpoints.

Stacks are better suited to keeping elements in relation to each other, especially across breakpoints. And example of this is a Header, Paragraph, and Button all stacked, one above the other.

If you’re interested in learning more about how Stacks work, take a look at this article - Studio Editor: Stacking Elements | Help Center | Wix.com


What are Padding, Margin, and Docking?
Docking defines which edges of a parent container an element will stick to. Margins define how far away the element stays from those edges. Padding creates space inside a section or container and the content inside.

2 Likes

A big thanks to @miril for joining the session about Responsiveness! :raised_hands:

There are many people, who I’m sure would agree, learned something from the knowledge and thoughts you brought.

Thank you!

1 Like