Responsive Display – How to Build Across All Devices?

Responsive Display – How to Build Across All Devices?

Responsive Web Design (RWD), a web development approach, creates dynamic changes to a website’s appearance, like the screen size, orientation of the device being used to view the site.

The goal of RWD is to provide a satisfactory user experience regardless of the device used to access the site. Meaning, the display has to expand when viewed on a desktop or laptop screen and should shrink when viewed on a tabloid or smartphone.

Here, we used a popular framework for mobile app development, Cordova (Cordova 8.0.0 & Cordova _iOS- 4.5.5) whereas the code was originally written in Angular 7.

To get a perfectly responsive site across the diverse displays, check the margin and padding values in component.css. As the values in pixel did not respond the way we wanted it to, we converted the values to percentage.

To achieve this, change the values of margin and padding to percentage. Stated below is the solution.

.group-list-container {

padding: 0px !important;

margin-top: 1% !important;

border: 1px solid whitesmoke;

}

.group-name {

background-color: #d9d9d9;

margin: 0px !important;

padding: 1% 1% 1% 1.5% !important;

Conclusion

Include these lines and you will have your varying display across the devices.

Centizen

A Leading IT Staffing, Custom Software and SaaS Product Development company founded in 2003. We offer a wide range of scalable, innovative IT Staffing and Software Development Solutions.

Contact Us

USA: +1 (971) 420-1700
Canada: +1 (971) 420-1700
India: +91 63807-80156
Email: contact@centizen.com

Centizen

A Leading IT Staffing, Custom Software and SaaS Product Development company founded in 2003. We offer a wide range of scalable, innovative IT Staffing and Software Development Solutions.

Twitter-logo
Linkedin
Facebook
Youtube
Instagram

Contact Us

USA: +1 (971) 420-1700
Canada: +1 (971) 420-1700
India: +91 63807-80156
Email: contact@centizen.com