Hi @Asami A,

    In situations where standard whole number percentages don’t give you the precise alignment or spacing you need, fractional percentages allow for finer control. 

The calc() function in CSS is used for creating responsive and flexible layouts in reactive applications. Also to perform calculations to determine CSS property values dynamically.

Best practices:-

1. Avoid Inline Styles: Inline styles can quickly become hard to manage and maintain, especially in large and complex projects. It becomes challenging to track and modify styles, leading to code duplication and potential errors.

Hi,

In responsive , it adjusts to different screen sizes when you use calc()

Thanks

Hello Asami, 

While following a best practice

you need to keep calculations as simple as possible to ensure readability and maintainability.

  for eg(/* Good */ width: calc(100% - 20px);

 /* Bad */ width: calc(100% - (10px * 2)); )

and ensure browser compatibility and consider providing fallbacks if necessary, Use calc() judiciously. Overuse can lead to complex render calculations, affecting performance . 

Or you can set the width of a container dynamically as follows 

eg(/* In the Styles tab or a custom CSS file */

 .my-container {    width: calc(100% - 20px); 

}  )

thanks...

Hello, @Asami A 

Using detailed designations like Width: calc(1*.***)% in the Styles tab of a Container in OutSystems is valid. The calc() function is a powerful CSS feature that allows you to perform calculations to determine CSS property values. This can be particularly useful in responsive design and dynamic layouts. 

When to use calc(): Responsive Design: To create layouts that adjust based on the viewport size. For example, you can use width: calc(100% - 50px) to ensure the element's width adjusts based on the parent container's width minus 50 pixels.

Combining Units: When you need to mix different units like percentages and pixels,. For instance, using height: calc(100% - 2rem) combines a percentage with a rem unit to create a height that is 100% of the parent's height minus 2rem. 

Dynamic Layouts: When the size of an element needs to be determined by the size of another element or container,. 

For example, margin-top: calc(10px + 2%) adds a fixed value to a percentage of the parent container's height. 

Centering Elements: To center elements within a container dynamically. For instance, you can use left: calc(50% - 100px) to position the element 50% from the left, then adjust by subtracting half the element's width to center it. 

Fluid Grids: For creating flexible grid layouts where column sizes need to be calculated based on available space,. 

For example, width: calc((100% / 3) - 20px) can be used for a three-column layout with 20px gaps. Example in OutSystems: In OutSystems, you can use calc() in the Styles tab of a container to achieve similar effects. 

For instance: ```css width: calc(100% - 30px); height: calc(50vh - 10px); margin-left: calc(2em + 1%); padding-top: calc(10px + 2%); ```

Usage in the Styles Tab: 

1. Select the Container widget in the OutSystems Service Studio. 

2. Go to the "Styles" tab. 

3. Enter the CSS with the calc() function: ```css width: calc(100% - 30px); height: calc(50vh - 10px); ``` 

4. Apply and check the design in the preview. 

Example Scenarios: Fixed Sidebar: If you have a sidebar with a fixed width and want the main content area to take up the remaining space, you can use width: calc(100% - 250px). Header with Variable Height: If you have a header with a variable height and want the main content area to fill the rest of the viewport, you can use height: calc(100vh - 70px). By using calc(), you can create more dynamic, flexible, and responsive designs that adapt to various screen sizes and layouts. 

"I hope this will be helpful for you."

Thank you,