{"id":19694134,"url":"https://github.com/agent-006/responsiveness","last_synced_at":"2025-07-15T22:10:08.631Z","repository":{"id":215226596,"uuid":"738415126","full_name":"Agent-006/Responsiveness","owner":"Agent-006","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-03T12:53:33.000Z","size":141,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T15:06:55.086Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Agent-006.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-03T07:11:13.000Z","updated_at":"2024-01-03T12:53:36.000Z","dependencies_parsed_at":"2024-01-03T08:28:16.209Z","dependency_job_id":"92b437e6-6c62-4357-9f4d-6582ef148bc1","html_url":"https://github.com/Agent-006/Responsiveness","commit_stats":null,"previous_names":["agent-006/responsiveness"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Agent-006/Responsiveness","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FResponsiveness","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FResponsiveness/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FResponsiveness/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FResponsiveness/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Agent-006","download_url":"https://codeload.github.com/Agent-006/Responsiveness/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Agent-006%2FResponsiveness/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265464213,"owners_count":23770315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T19:20:24.896Z","updated_at":"2025-07-15T22:10:08.294Z","avatar_url":"https://github.com/Agent-006.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"🔥Responsive website using HTML and CSS🔥\n\n\n🎯 Understanding Units ✅\n\n🌟 px --\u003e pixel is fixed\n\n    target_element {\n        font-size: 12px;\n    }\n\n🌟 % --\u003e percentage is what percent of the parent element\n\n    target_element {\n        font-size: 12%;\n    }\n\n    /* OR */\n\n    target_element {\n        height: 50%;\n        width: 100%;\n    }\n\n🌟 vw, vh --\u003e\\ viewport width - gives width with respect\n                                to the whole screen and\\\n               \u0026nbsp;viewport height - gives height with respect \n                                 to the whole screen\n\n    target_element {\n        height: 100vh;\n        width: 100vw;\n    }\n\n    /* this will take size with respect to the width of the screen */\n    target_element {\n        font-size: 6vw; \n    }\n\n    /* this will take size with respect to the height of the screen */\n    target_element {\n        font-size: 6vh; \n    }\n\n\n🌟 vmax, vmin --\u003e\\ viewportMax - Changes the size with\n                                respect to the maximum \n                                size of the screen.\\\n                  viewportMin - Changes the size with\n                                 respect to the minimun \n                                 size of the screen.\n\n    target_element {\n        font-size: 7vmax;\n    }\n\n    target_element {\n        font-size: 7vmin;\n    }\n\n\n🌟 em, rem --\u003e\\ em determines the size with respect to it's\n                parent.\\\n               rem determines the size with respect to the\n                root(HTML). 1 root = 16pixels\n\n    /* 1em means - 1 * \u003c|pixel size of parent|\u003e */\n    target_element {\n        font-size: 1em;\n    }\n\n    /* 1rem means - 1 * \u003c|pixel size of root|\u003e */\n    target_element {\n        font-size: 1rem;\n    }\n\n🎯 Layout of website ✅\n\n🌟 absolute vs flex ?\n\n--\u003e Using position: absolute will make it hard to be responsive later.\n\n    target_element {\n        position: absolute;\n    }\n\n--\u003e Always preffer using flexbox to make it easy make the website more responsive.\n\n    target_element {\n        display: flex;\n    }\n\n\n🎯 flexbox ✅\n\n🌟 Display flex \n\n    target_element {\n        display: flex; /* by default it is block */\n    }\n\n\n🌟 aligning items in x and y axis\n\n    target_element {\n        display: flex;\n        align-item: center; /* to center with respect to the cross-axis( y-axis )*/\n        justify-content: center; /* to center with respect to the main-axis(x-axis)*/\n    }\n\n\n🌟 flex direction\n\n    target_element {\n        display: flex;\n        flex-direction: column; /* default row */\n    }\n\n\n🌟 flex wrap\n\n    target_element {\n        display: flex;\n        flex-wrap: wrap; /* this wraps the element accordingly */ \n    }\n\n🎯 Css Media Queries ✅\n\n🌟 min height, min width\n🌟 min width, max width\n\n    /* this will be applied to all devices below 600px in width */\n    @media (max-width:600px) {\n        target_element {\n            background-color: royalblue;\n            border-radius: 50%;\n        }\n    }\n\n\n🔑 Key points to keep in mind to make website responsive\n\n1️⃣ CSS Flexbox\\\n2️⃣ CSS Units\\\n3️⃣ Responsive Typography\\\n4️⃣ Mobile-First Approach\\\n5️⃣ Flexible Images and Media\n\n📌 Practice! Practice! Practice!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagent-006%2Fresponsiveness","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagent-006%2Fresponsiveness","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagent-006%2Fresponsiveness/lists"}