Responsive display - how to built across all devices? - Blog - Centizen Inc.
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.
Software Development
IT Staffing
General Staffing
Remote Hiring
Products
ZenBasket
Zenyo Payroll
Zenyo Workforce
Company
About Us
Why Us
Case Studies
Blogs
Careers
Client Referral
Affiliate Program
Contact Us
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
Our services:
- Staffing: Contract, contract-to-hire, direct hire, remote global hiring, SOW projects, and managed services.
- Remote hiring: Hire full-time IT professionals from our India-based talent network.
- Custom software development: Web/Mobile Development, UI/UX Design, QA & Automation, API Integration, DevOps, and Product Development.
Our products:
- ZenBasket: A customizable ecommerce platform.
- Zenyo payroll: Automated payroll processing for India.
- Zenyo workforce: Streamlined HR and productivity tools.