Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

Media Queries

Media Queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.

https://github.com/byteyard/fluidsizingcss

FluidSizingCSS is a pure CSS solution for responsive design, offering fluid sizing locks for seamless scaling across devices. It eliminates the need for external tools, enabling developers to create adaptable, lightweight, and fast interfaces with native CSS.

adaptive-design css fluid-sizing media-queries native-css responsive-design scaling web-development

Last synced: 05 Apr 2025

https://github.com/fernandams/responsive-portfolio

This repository presents the course project 'HTML and CSS: Working with Responsiveness and Project Deployment' on Alura

css html media-queries relative-units responsive-layout

Last synced: 11 Mar 2025

https://github.com/pijusp/7-sign-up2

Responsive HTML and CSS sign-up form

css3 html5 media-queries responsive

Last synced: 01 Apr 2025

https://github.com/jayanth-kotni/match-game-react.js

Match Game is a fun and challenging game where you match images within categories. Score points, beat the timer, and enjoy multiple rounds. Play again to reset scores and categories for endless fun!

components css flexbox media-queries reactjs responsive-web-design timeinterval

Last synced: 28 Mar 2025

https://github.com/saleh0987/mealify_site

Route_Frontend_Tasks-C43-

css3 html5 media-queries

Last synced: 28 Mar 2025

https://github.com/productmap/russian-travel

Проект: Путешествие по России

bem-methodology css html5 media-queries

Last synced: 21 Feb 2025

https://github.com/msarmadqadeer/news-page

This is a static news page that I created using HTML5 and CSS3.

css3 html5 media-queries static-page

Last synced: 12 Mar 2025

https://github.com/achalesh27022003/techdoc

This project is part of FCC curriculum and has responsive, descriptive and bookmarks use in technical writing of CSS

bookmarks css css3 cssflexbox documentation html media-queries technical-writing

Last synced: 21 Feb 2025

https://github.com/oppahero/article-preview-component

Article Preview Component build with HTML CSS Vanilla JavaScript

bem css flexbox html javascript javascript-vanilla media-queries

Last synced: 17 Mar 2025

https://github.com/oppahero/card-feature-section

Four Card feature section build with HTML and CSS

bem css css-flexbox css-grid html media-queries mobile-first

Last synced: 17 Mar 2025

https://github.com/oppahero/recipe-page

Recipe page build with HTML and CSS

css css-reset flexbox html media-queries

Last synced: 17 Mar 2025

https://github.com/mayarajaques/projeto-travelgram-v2.0

3º desafio desenvolvido com os conhecimentos adquiridos no módulo de responsividade do curso Fullstack da Rocketseat. Neste projeto adaptei a página utilizando Media Queries para desktop e mobile

css html media-queries

Last synced: 20 Mar 2025

https://github.com/gunjankadu/hotel-website

Hotel Website Only HTML & CSS

css3 html5 media-queries

Last synced: 23 Feb 2025

https://github.com/gaurav1129/blog-page

A replica of news and blog user interface page.

animation css3 html5 media-queries

Last synced: 26 Mar 2025

https://github.com/oleg-putseiko/match-breakpoint

A library of optimized React components and hooks for matching media queries

breakpoint match-media media-queries performance react tailwindcss typescript

Last synced: 11 Apr 2025

https://github.com/dmitrymalakhov/media-breakpoints-watcher

Library for easy use of media breakpoints in js

breakpoints css-in-js media media-queries

Last synced: 18 Mar 2025

https://github.com/gunjankadu/edge-ledger

A Fictional Website Markup Using HTML5,CSS3,Flex and Media Queries

css3 flexbox html5 javascript media-queries

Last synced: 23 Feb 2025

https://github.com/janan6768/landing-page-challange

Its a landing Page Challenge from SMIT.

bootstrap css css-variables html5 media-queries

Last synced: 10 Apr 2025

https://github.com/arakakimath/shoplist

Sixth Challenge of the Rocketseat Fullstack course. In this challenge, the author had to develop a responsive website with html and css. Then, he had to add some Javascript interactions to dynamically add and remove elements according to user's needs.

html-css javascript media-queries responsive-website

Last synced: 01 Apr 2025

https://github.com/mdmourao/nike-advertising

Nike Ad - Basic HTML example

css html5 media-queries svg

Last synced: 05 Apr 2025

https://github.com/justinlucky/techfarming_client

This is the Frontend side of my website for my startup idea called TechFarming. Built with lot of effort.

css-animations css-flexbox css3 media-queries react-chatbot-kit react-icon-kit react-router react-styled-components reactjs responsive-web-design scss-styles

Last synced: 26 Mar 2025

https://github.com/daun/mq-observer

Simple media query observer

css javascript media-queries

Last synced: 26 Mar 2025

https://github.com/mosalem149v2/football-match-scoreboard_debi-task

A simple web application to display a football match scoreboard, featuring team rosters, match odds, and functionalities for substitutions and goal tracking. Built using HTML, CSS, and JavaScript.

css3 html5 js media-queries responsive

Last synced: 04 Mar 2025

https://github.com/maroun-baydoun/use-media-query

Listen to media query matches in React

hook media-queries react responsive typescript

Last synced: 21 Mar 2025

https://github.com/matheusfdosan/devlinks-rocketseat

O DevLinks é um agregador de links para usar como cartão de visitas online.

css dom figma git github html javascript media-queries rocketseat

Last synced: 23 Feb 2025

https://github.com/mosalem149v2/bank-account-simulator_debi-task

A web-based bank account simulator allowing users to create accounts of various types (Savings, Checking, Business), perform transactions, and manage loans. The simulator supports deposit, withdrawal, loan requests, interest calculation, and more.

account-creation business-features css3 dom-manipulation error-handling html5 interest-calculation js media-queries responsive transactions

Last synced: 04 Mar 2025

https://github.com/ameyjoshi0209/mealmate

Mealmate is an innovative system designed to automate and streamline attendance tracking for messes and cafeterias using unique QR code generation.

bootstrap composer css3 html5 javascript jquery media-queries mysql-database php phpmyadmin qrcode-generator xampp-server

Last synced: 21 Mar 2025

https://github.com/nermfrontdev/practice-index

CSS practice project. Basic HTML file with its tags, in CSS I added a @media (min-width: 1900px) making "Mobile First".

css3 html5 media-queries

Last synced: 03 Mar 2025

https://github.com/rmoongit/note-balls

NoteBalls! Add and edit your personal notes with vue reactive components! ( if don't work, use vpn for firebase )

bulma-css components composition-api firebase hosting laravel media-queries npm routers slots vue3

Last synced: 27 Mar 2025

https://github.com/jasheloper/responsive-web-design-i-project

The project task is to create an adaptive version of a design & for it to work on multiple devices using media queries.

adaptive-layouts css desktop-development media-queries mobile-development responsive-web-design

Last synced: 03 Apr 2025

https://github.com/jasheloper/advanced-css-sprint-challenge

Demonstrate proficiency by updating a website that is missing content as well as adding mobile styling.

markup media-queries meta mobile-styling preprocessing semantic viewport

Last synced: 03 Apr 2025

https://github.com/diegodscamara/instagram-login

Instagram Login Page with HTML, CSS and JavaScript

css flex html media-queries

Last synced: 10 Apr 2025

https://github.com/aldamayorgadev/learning-responsive-web-design

Ejemplos de uso de Media Queries para el responsive web design.

css html media-queries responsive-web-design

Last synced: 09 Apr 2025

https://github.com/barandev/media-queries

A collection of CSS media queries implemented for 236 different devices including mobiles, tablets, watches, and laptops. Perfect for developers seeking to create responsive designs that cater to a wide array of screen sizes and resolutions.

collection css css-media-queries dataset datasets media-queries

Last synced: 17 Mar 2025

https://github.com/pushpendra-1697/kalvium

Draggable & Droppable

html-css-javascript media-queries

Last synced: 24 Feb 2025

https://github.com/gianmen91/fruit-slot-machine-html-css-js

Welcome to Fruit Slot Machine, a fun and interactive web-based game where players try their luck by spinning fruits! Feel free to explore, select your favorite fruit, and spin for a chance to win!

css font-awesome html javascript media-queries

Last synced: 02 Mar 2025

https://github.com/hashal890/weather-app

Builded weather app with in unit-3 @ Masai School.

css html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/star-wars

Builded star wars characters search app. Here you can search your favourite character and get basic information about them.

css debouncing html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/space-tourism-website

Solution of challenge of building Space Tourism Website given by Frontend mentor. Here you can get some information about space tours.

css frontend-mentor html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/hotstar-search-bar

Builded Hotstar searchbar with some functionalities in unit-3 @ Masai School.

css debouncing html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/food-app

Builded food app with some functionalities in unit-3 @ Masai School.

css debouncing html js media-queries

Last synced: 11 Apr 2025

https://github.com/hashal890/youtube-app

Builded YouTube app with some functionalities in unit-3 @ Masai School.

css html js media-queries

Last synced: 11 Apr 2025

https://github.com/dwmedeirosdev/bikcraft-origamid

Projeto incompleto - Origamid

css grid html media-queries

Last synced: 02 Mar 2025

https://github.com/dwmedeirosdev/league-of-legends-project

JavaScript Challenge 07 ( Acima de 8 caracteres ( Login e Senha ) o botão de acesso se altera )

css3 html5 javascript media-queries

Last synced: 02 Mar 2025

https://github.com/dwmedeirosdev/projeto-portfolio-origamid

Projeto criado durante o curso da Origamid, colocando em prática os conhecimentos adquiridos em Desenvolvimento Web.

css html media-queries

Last synced: 02 Mar 2025

https://github.com/kuzhalikumaraguru/htmlcssd5-rms-12

Github sample image build up in RWD

css html javascript media-queries rwd

Last synced: 21 Feb 2025

https://github.com/kurooo-yamiii/quickstash-inventory-management-sytem

PHP Native - Javascript - Ajax - JS Library - RESTFUL API - Laboratory Inventory System - SQL

ajax javascript js-library media-queries php-native phpmyadmin restful-api sql

Last synced: 17 Mar 2025

https://github.com/kurooo-yamiii/pst-monitoring-management-system

PHP Native - Javascript - XML - Ajax - SQL PhpyMyAdmin - JS Library - Media Query - PDO

javascript jquery media-queries pdo-mysql php-native phpmyadmin sql xml

Last synced: 17 Mar 2025

https://github.com/aurelily/trip-advisor

Trip Advisor clone : Simple web home page responsive demo project. by Aurélie PREAUD for Le Reacteur

css3 html5 javascript media-queries

Last synced: 02 Mar 2025

https://github.com/style-forge/media

A comprehensive CSS library with predefined media queries for desktop, tablet, mobile, portrait, and landscape layouts. Ideal for creating responsive and consistent designs with ease.

breakpoints consistent css design desktop frontend html landscape lightweight media-queries mobile modular portrait responsive responsive-design styles styling tablet utilities web-development

Last synced: 09 May 2025

https://github.com/mahmoudaliaboelhassan/portfolio-website

This website is a portfolio of My work as a frontend developer. It showcases My Skills in HTML, CSS, and JavaScript through engaging and visually appealing designs.

css-flexbox css3 date font-awesome google-fonts grid-system html5 javascript media-queries transition

Last synced: 22 Feb 2025

https://github.com/zeeshanali90233/nexskill-frontend-b-5

Frontend Development with AI Chatbot Course - Batch 5 by NeXskill, Lahore. Learn the fundamentals of HTML, CSS, JavaScript, Git/GitHub, and AI chatbot integration using APIs like ChatGPT, Gemini, Phind, and Claude LLM. A beginner-friendly, 16-lecture course to kickstart your journey in frontend development and AI-powered applications. 🚀

ai animations api chatbot chatgpt clone-website css dom event-loop gemini git github githubdesktop html javascript llm media-queries restful-api weather-app

Last synced: 04 Apr 2025

https://github.com/mahmoudaliaboelhassan/tasks-list

This project is a task list web application designed to help users keep track of their daily tasks. The project uses HTML, CSS, and JavaScript to create a visually appealing and interactive interface

alert css-flexbox css3 font-awesome google-fonts html5 js json local-storage media-queries object-oriented-programming regular-expression

Last synced: 22 Feb 2025

https://github.com/dev-jakki/url-shortening

Encurtador de URL, desenvolvido usando Bitly API

angular angular-cli bitly-api media-queries responsive-layout scss typescript

Last synced: 02 Mar 2025

https://github.com/archana-nagaraj/frontend-mentor---3-column-preview-card-component

Frontend Mentor challenge to design a 3-column preview card component using HTML and CSS. Used grid for layouts and media queries for covering various dimensions.

css frontend-mentor html media-queries

Last synced: 02 Mar 2025

https://github.com/matheusfdosan/login-screen-cursoemvideo

Uma tela de login, utilizando formulários em HTML e Media Queries.

css cursoemvideo forms git githb html media-queries

Last synced: 23 Feb 2025

https://github.com/boakaidorborkamara/responsive-registration-form-

Understanding Responsiveness and Media Queries

media-queries

Last synced: 17 Mar 2025

https://github.com/anithad1625/howtocss-instaclone

HowToCSS-InstaClone is a simplified Instagram-like social media feed interface built using HTML, CSS, and Bootstrap Icons. It features a responsive design for various screen sizes, a grid-based feed layout, user profiles with profile pictures and usernames, posts with images and captions, and reactions and engagement options such as likes and comme

bootstrap-icons css html media-queries

Last synced: 02 Mar 2025

https://github.com/matviyroman/resass

Mixins for checking device by width and height (width, min-width, max-width, height, min-height, max-height) or group of devices (mobile, tablet, laptop, desktop) or device by name (iPhone 5, iPhone X, iPhone 11 Pro Max, iPad Pro 12.9, etc). Expandable and very simple for usage.

css frontend media-queries mq resass sass sass-mediascreen scss scss-mediascreen

Last synced: 23 Feb 2025

https://github.com/mohammdhawa/egens-landing-page

Simple landing page using HTML & bootstrap5

bootstrap5 css github-pages html javascript media-queries

Last synced: 13 Mar 2025

https://github.com/pedrodevvv/alpha-host

Projeto de hospedagem de sites, desenvolvido com o objetivo de treinar a responsividade, neste projeto foi trabalhado apenas a parte de estrutura e estilização.

css-flexbox css3 html-css media-queries responsive-web-design

Last synced: 07 Apr 2025

https://github.com/valeriogc/postcss-media-query-pruner

A PostCSS plugin that merges, removes duplicates, and sorts media queries for optimized, lightweight CSS

css css-optimization media-queries postcss postcss-plugin sorting

Last synced: 05 May 2025

https://github.com/sumaiyabanu15/css-project

This page Is about Travel Landing Page - Using HTML & CSS

css html5 media-queries

Last synced: 26 Feb 2025

https://github.com/yashi-singh-1/piano-using-html-and-css

a responsive piano interface using HTML and CSS, exploring media queries and pseudo selectors for screen size adaptability. Dive into responsive web development fundamentals while building an engaging project!

css css3 front-end frontend frontend-development github html html-css html5 media-queries open-source pseudo-selectors pseudocode responsive-design responsive-web-design web-development

Last synced: 24 Feb 2025

https://github.com/panxitus/hospital_v.4

Escalonamiento Proyecto Sitio Web Hospital /media queries

7-1architecture bem-methodology css3 html5 media-queries mobile responsive-design sass

Last synced: 07 Apr 2025

https://github.com/peterbenoit/getviewport

GetViewport is a lightweight JavaScript utility for responsive breakpoint detection. It dynamically injects CSS breakpoints and allows JavaScript to check the current viewport size directly. This setup avoids the need for complex SCSS configurations and pseudo-elements, making it simple to integrate into any web project.

javascript media-queries responsive-design viewport

Last synced: 23 Mar 2025

https://github.com/mosalem149v2/staff-dish-booking-management_debi-task

A comprehensive web application for managing staff roles, dishes, and table bookings for a restaurant. This project includes functionalities for adding, editing, and deleting staff roles and dishes, checking the restaurant's operating status, managing daily specials, and tracking customer bookings.

application-development css3 customer-management frontend-development html5 javascript media-queries responsive restaurant-management user-interface web-development

Last synced: 04 Mar 2025

https://github.com/talhat298/quader

A responsive web page featuring a full-screen background, Bengali text overlay, and looping audio, prompting the question: "Will all problems be solved just by saying sorry?"

audioapi css3 html5 media-queries responsive-web-design

Last synced: 05 Apr 2025

https://github.com/victorlcastro-dsa/login-site-desafio

Este projeto é um exemplo de uma tela de login simples e responsiva, desenvolvida apenas com HTML e CSS. O foco está no uso de media queries para adaptar o layout a diferentes dispositivos. Não inclui funcionalidades de back-end ou autenticação, sendo destinado apenas para fins de visualização e aprendizado.

html-css media-queries project-based-learning web-development

Last synced: 03 Mar 2025

https://github.com/namonaki0/fe-mentor-nft-preview-card

Frontend Mentor - NFT Preview Card

html media-queries responsive-design scss

Last synced: 05 Mar 2025

https://github.com/lilymilano/landing-page-responsive-html-css-aug2922

Building a responsive e-learning landing page. HTML and CSS with media queries.

css3 html media-queries

Last synced: 26 Feb 2025

Media Queries Awesome Lists
Media Queries Categories