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.
