Object States Get Distorted in Tablet and Mobile View

[nooksportslancaster]

Adobe Captivate 2017 - I have smartshapes set up with advanced actions to display text and change state while the text is displayed. It works beautifully in the desktop view. In the table and mobile views, I manually resized the smartshapes to make them fit on the smaller screen. The State Views of these shapes did not resize, so they stay in the same position and size as the original shape on the desktop view. I've attached pictures of the normal desktop view vs. a distorted tablet view. Is there a way to resize and reposition the State View of objects on tablet or mobile? I know there is probably a way to set up the positioning options for the smartshapes on the desktop view so that they proportionally scale down to fit the smaller views without having to manually resize them on each side, but I'm not sure how to do that. 

Any help will be greatly appreciated!! 

[Lilybiri]

WHich work flow do you use: Fluid Boxes or Breakpoint Views. More about the diffference:

Fluid Boxes Or Breakpoint Views? - Captivate blog

Default is Fluid Boxes, but in that case you are not able to control the layout on lower screen resolutions, you always have rset up the fluid boxes in the correct way.

If you switched to Breakpoint Views, this should be possible by correctly setting up the Position Properties .

[nooksportslancaster]

Thank you for your timely response, Lilybiri! I was able to figure it out. I use breakpoint views and I changed the position properties to px for the Height and % for the Width. 

[Lilybiri]

It will be distored in that case, if you mean by distorted change in width/height ratio. I would use % for the width (most important in reponsive design) and Autto for the Height to keep that ratio fixed. Location can be set up either to the sides of the screen or relative to each other.