Formatting looks fine in Studio, but goes nuts when previewed in browser

[lexicon2600]

This is my first time using React Studio. I’ve created a 12-page project with 20 components.

Everything looks good inside React Studio in multiple size previews, but when I export a preview to the browser (and mobile) the formatting goes crazy in different ways on almost every page.

A lot of buttons are miscolored, and the lower border for my header is getting moved all over the place and not stretching the full width of the window, even though it’s aligned to both left and right.

I really hope there is a simple fix here. I’ve spent all weekend working on this.

I’ve blurred branding and identifiable text for the app to protect confidential information, so please ignore the blurry bits in the screenshots below. Annotations are written in magenta Courier font over black boxes.

[Adam_Wasserman]

Hi,

I am Adam from the Neonto team. I apologize for the delay, we had a little discussion internally about your question.

I think the first and most important thing to say is this: React Studio is a complex, feature-rich program that takes time to learn. It might be deceptively easy to get started with, but it is comparable to Photoshop in terms of the time it takes to learn how to use it to full effect, especially to master the use of key lines and the positioning controls in the layout tab. This is likely the cause of your misalignments. I would be happy to look that over with you to see if I can fix the issues.

The second most important thing to say is that our in-studio mini-previews are not substitutes for full previews in a browser. We are currently discussing ways in which to make this more clear to new users. Below is one of the ideas we are considering, users can switch between the three different styles; we would love to know what you think about this.

As part of this revision, we will make it easier for you to control the final look in the browser using conventional CSS. This will solve your button color and font size problems.

The third thing is: the immediate fix for the buttons and fonts is to identify the appropriate selector (I can help you do this if you do not know how) and write some css that fixes your issues, and then to append it to ~/Documents/React\ Studio/Exported\ Projects\YOURAPPLICATIONNAMEHERE\src\App.css. We regret you having to do this workaround, it will not be for too long before we get out our update.

Best regards,
Adam and the Neonto Team

[lexicon2600]

Thank you @Adam_Wasserman and team.

After continuing to work with the browser preview and the keylines, I think I’ve straightened out most of the alignment issues. It helped me a lot to open one of the included advanced templates and see how the elements were aligned in those. Simply copying the settings resolved a lot of problems.

To fix the button color issue, I simply stopped using more than two colors on a button. If the content and outline are the same and the background is different there is no problem, but if the content and border are different, it displays improperly.

I have always considered CSS scripting a bit of a dark art. I just can’t keep its intricacies in my head. Being able to add CSS manually wouldn’t really help someone like me, who couldn’t remember the required syntax and element order to save his life.