How to use direction wrap, no wrap and reservse wrap inside the row ?

Modified on Thu, 28 Dec 2023 at 06:17 PM

1. Start by creating a row in your editor area with more than two columns and add elements inside the columns of your choice.


2. Once the elements are added, select the settings of the parent row. Then, navigate to the mobile mode for further adjustments.



3. In the style settings, find the background options for the row in mobile mode. Here, you will get three choices: wrap, no wrap, and reverse wrap.




Wrap -  This option allows the content within the row to wrap onto the next line if it exceeds the width of the screen. It helps ensure that all content is visible and doesn't get cut off on smaller screens.



No Wrap - Selecting this option ensures that the content within the row remains on a single line, even if it exceeds the width of the screen. This can be useful when you want to maintain a specific layout without any wrapping on mobile devices.



In No Wrap you can also readjust the size of the columns by the help of the given dot



Reverse Wrap - This option is more advanced and may not be available in all editors. It reverses the order of elements within the row when wrapping occurs. For example, if elements are originally arranged from up to down, the reverse wrap would arrange them from down to up after wrapping.

 


4. After understanding the meanings of wrap, no wrap, and reverse wrap, choose the option that best suits your design preferences. It's important to note that these options are typically designed for mobile mode, ensuring optimal responsiveness and layout adjustments on smaller screens.


By following these steps and understanding the purposes of wrap, no wrap, and reverse wrap, you can customize the mobile layout of your row based on your specific design requirements.


 

Congratulations! You're now equipped to create beautifully responsive mobile layouts.



 




 



 


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article