Responsive Display – How to Build Across All Devices?
![Responsive Display – How to Build Across All Devices? Responsive Display – How to Build Across All Devices?](https://www.centizen.com/wp-content/uploads/2020/04/Responsiveness.png)
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
Our Services
Software Development
IT Staffing
General Staffing
Remote Hiring
Products
Software Development
UI/UX Design
Product Development
Devops Services
Managed Cloud Services
Tech Stack
Contact Us
USA: +1 (971) 420-1700
Canada: +1 (971) 420-1700
India: +91 63807-80156
Email: contact@centizen.com