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/brigand/react-with-viewport

This high order component provides the viewport size to the child in an efficient ways.

media-queries react

Last synced: 15 Mar 2025

https://github.com/kirang89/css-mediaquery

Parses and determines if a given CSS Media Query matches a set of values. This is a port of https://github.com/ericf/css-mediaquery.

css css-mediaquery media-queries python

Last synced: 18 Feb 2025

https://github.com/rudradcruze/leader-board

This project is basically based on gird and flex box. Simple multiple columns layout.

css3 flex-box grid html5 media-queries responsive

Last synced: 31 Mar 2025

https://github.com/rudradcruze/world-cup

This project is about simple world cup projects with multiple articles and matches with responsive. Live Site:

css3 flexbox grid html5 media-queries responsive transition

Last synced: 31 Mar 2025

https://github.com/pushpendra-1697/adobe-xd-assignment

This React onboarding project includes pages for login, signup, home, and profile functionalities, catering to user authentication and navigation, facilitating a seamless design experience.

dom-manipulation html-css-javascript jsx-syntax localstorage media-queries react-components react-router-dom reactjs

Last synced: 24 Feb 2025

https://github.com/saurabhnalepatil/decorative-events

Showcasing his expertise in Event Decoration. Explore a collection of stunning projects and experiences that demonstrate creativity and skill.

angular-cli bootstrap5 css3 emailjs googlefonts html5 media-queries toaster typescript

Last synced: 05 Apr 2025

https://github.com/rustam-tolipov/business-management-web

Greetings and welcome to the Business Management website, a dynamic landing page platform created to easily promote business growth. Our platform, designed with HTML and CSS to provide an intuitive user experience, enables business owners to prosper. Come along as we streamline business operations and help you reach your greatest potential!

css html media-queries responsive-design

Last synced: 29 Mar 2025

https://github.com/narendrakoya999/stats-preview-card-component

This is A Stats Preview Card Component Project using HTML5 and CSS3

css3 css3-flexbox html5 media-queries

Last synced: 21 Mar 2025

https://github.com/yutahaga/vue-media-breakpoints

A plugin of Vue that store current viewport size name.

media-queries vue vue-plugin

Last synced: 13 Apr 2025

https://github.com/nathan-i-martin/react-ui-breakpoints

Easily add media breakpoints to your react project

dynamic-web dynamic-website media-queries npm react react-hooks typescript

Last synced: 12 Mar 2025

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

This React onboarding project includes pages for login, signup, home, and profile functionalities, catering to user authentication and navigation, facilitating a seamless design experience.

dom-manipulation fixel-based-analysis fonts html-css-javascript jsx-syntax localstorage media-queries react-components react-router-dom reactjs

Last synced: 24 Feb 2025

https://github.com/github-dev12345/education-website-project

👌🚀 Finally Make a Education Website For Foreign Language ( Japanase-Language ) Used ✌️SASS/SCSS ( Nesting ) & HTML5 😊( Semantic Code or DOM Structure ), CSS3 ( Flex-Box )

css-flexbox eductional html5-css3 japanese-language-learners media-queries nesting responsive-layout responsive-web-design sass-framework scss-framework website

Last synced: 23 Feb 2025

https://github.com/rupanguvi/landing-page

Landing page design

css3 html5 media-queries

Last synced: 01 Mar 2025

https://github.com/khizarwakeel/my-first-responsive-website

This is my first Resposive Website

bootstrap css3 flexbox html5 media-queries

Last synced: 01 Mar 2025

https://github.com/dimamirana/omnifood

A fully responsive website designing using html5, css3, media-query, ajax

css3-animations css3-transitions html5 jquery media-queries

Last synced: 02 Apr 2025

https://github.com/uzmakh/fcc-piano

Responsive Web Design Lesson-11

media-queries pseudo-selectors responsive-design

Last synced: 01 Mar 2025

https://github.com/stefanoconsonni/fylo-landing-page

A beautiful landing page built for a Tech Company. The page if fully responsive for all screen sizes. All the images used for the project have been optimized for better performance. I have also added specific favicons for android and apple devices.

css html javascript media-queries responsive-design

Last synced: 01 Mar 2025

https://github.com/stefanoconsonni/omnifood

A beautiful landing page built for a Tech Company. The page if fully responsive for all screen sizes. All the images used for the project have been optimized for better performance. Specific favicons for android and apple devices have been added.

css html javascript media-queries responsive-design

Last synced: 01 Mar 2025

https://github.com/matheusfdosan/responsive-project-with-sass

Esse projeto é uma mistura de dois Masterclass, o #08 que usamos estratégias de unidades de medidas do CSS, para que tanto o nosso Layout, quanto os nossos textos, e Media Queries para que fiquem responsivos. Já o #15, é a introdução ao SASS, onde coloco em prática tais ensinamentos.

dom git github html javascript media-queries responsive-design sass

Last synced: 23 Feb 2025

https://github.com/matheusfdosan/codeflix

Um projeto muito simples, onde é possível o usuário adicionar cards de filmes.

animation-css css dom git github html javascript media-queries

Last synced: 23 Feb 2025

https://github.com/kopepasah/sass-media-query-stack

Sass mixin which builds media queries, from simple to complex.

media-queries media-query sass sass-mixins

Last synced: 17 Jan 2025

https://github.com/emersoncarneirodasilva/projeto-box-shadow-generator

Projeto de um gerador de sombras, facilitando na produção de projetos front-end como uma ferramenta de fácil manuseio.

box-shadow css dom-manipulation flexbox html javascript media-queries

Last synced: 11 Mar 2025

https://github.com/noclist/carps-space

carps space is my personal website where I experiment with modern CSS techniques

css css-animations css-custom-properties css-flexbox css-grid css3 eleventy front-matter html html5 media-queries njk nunjucks sass ssg

Last synced: 12 Mar 2025

https://github.com/akramadjab/order-summary-component

A simple Order Summary component code challenge to Frontend Mentor using Flexbox, Animation, and Hover state

animation animation-css animations bem bem-css bem-methodology css css-animations css-flexbox html media-queries responsive-design

Last synced: 21 Feb 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/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/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/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/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/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/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/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/belchenkov/hotel-website

Hotel Website on clean HTML5 & CSS3 and some JS

css3 font-awesome-5 html5 media-queries responsive-design

Last synced: 23 Feb 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/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/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/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/tsheporamantso/css-grid-models

In this projects I build 5 CSS-GRID responsive models for Desktop, Tablet and mobile version sampled from Figma

grid-layout html5 media-queries scss-framework

Last synced: 13 Mar 2025

https://github.com/ibrahimalsabr/elzero-template

This is a project for creating Elzero Template using HTML and CSS.

background-image css css-animations css-flexbox css-grid hover-effects html media-queries responsive-design

Last synced: 27 Mar 2025

https://github.com/yoursandeshshrestha/learn-responsive-design

Best media queries to make website responsive (both mobile-first approach and Desktop-first approach) 🤝

css3 html5 media-queries resposive-design

Last synced: 18 Mar 2025

https://github.com/samuel-amaro/huddle-landing-page-with-introductory-section

Desafio da plataforma Front-End mentor, uma land page sobre comunidades com uma seção de introdução

bem-methodology css3 flexbox font-awesome html5 media-queries mobile-first responsive-layout

Last synced: 19 Mar 2025

https://github.com/samuel-amaro/fylo-data-storage-component

Desafio de codificação Front-End, projeto realista com objetivo de desafiar as habilidades de HTML5, CSS3. Componente de armazenamento de dados.

bem-methodology css3 flexbox-css grid-layout html-semantics html5 media-queries mobile-first normalize-css rwd-response

Last synced: 19 Mar 2025

https://github.com/rfabreu/fptv-webfeatures

Official repository for the website of FPTV, a television channel. It contains the source code for the website's features and user interface, designed for a seamless viewing experience. This repository serves as a platform for collaboration, version control, and improvement of the FPTV website.

engeneering front-end-development glassmorphism html-css-javascript media media-queries streaming television television-stations television-studios webdevelopment website

Last synced: 20 Mar 2025

https://github.com/ayush-97techyboy/ez_assg_fe

A resoinsive one page UI without using BootStrap with the help of API.

css-flexbox css-grid css3 html5 javascript media-queries reactjs

Last synced: 20 Mar 2025

https://github.com/webwithaman/classroom-project-7-by-sheryians

Color Clash: Test Your Luck is a fun and interactive web game where users generate a random target color and shuffle through colors to match it, testing their luck. Built using JavaScript and DOM manipulation, the game features dynamic color changes, sound effects for an engaging experience.

css html5 javascript js media-queries responsive-design

Last synced: 27 Mar 2025

Media Queries Awesome Lists
Media Queries Categories