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/ajmalfaris11/product-list-react

Smart. is a modern frontend design project showcasing a product list, crafted with React, Bootstrap, and CSS for a sleek, responsive user interface. This repository highlights efficient rendering and dynamic data handling, making it ideal for e-commerce platforms and product showcase websites.

boostarp css frontend map media-queries react responsive-design usestate-hook

Last synced: 17 Feb 2025

https://github.com/afek-sakaju/gold-pharma-shop

Web app created to offer users the best pharmaceutical shopping experience. Switch between two modes: Customer Mode for browsing and shopping, and Admin Mode to manage data within the shop.

craco eslint javascript media-queries pharma pharmacy react-router-dom reactjs redux-toolkit removebg shop storybook styled-components web-application

Last synced: 08 Mar 2025

https://github.com/noahflk/react-breakout

Lightweight hook for responsive breakpoints in React components

hook media-queries react react-hooks responsive viewport

Last synced: 23 Mar 2025

https://github.com/sofiane-abou-abderrahim/html-css-basics-webfood-responsive-website

I built a responsive website and turned this desktop only-page into an adaptive mobile and desktop website, which looks good on all devices.

adaptive-web-design css3 desktop-first em html5 internal-links media-queries mobile-first pixel pourcentage rem responsive-web-design target-selection units user-preferences

Last synced: 03 Apr 2025

https://github.com/anandchowdhary/prefers-reduced-motion

πŸ™… Check if a user prefers reduced motion using CSS

css media-queries prefers-reduced-motion typescript

Last synced: 20 Apr 2025

https://github.com/ziad-saab/mobx-matchmedia

A MobX observable for window.matchMedia

matchmedia-api media-queries mobx react

Last synced: 28 Mar 2025

https://github.com/ahmed-elrashidii/mealify

"Mealify" is a responsive restaurant landing page that offers a delightful and engaging user experience. The website showcases various sections including a home page, chefs' profiles, a gallery of appetizing dishes, and a contact section.

css-pseudo-classes css-pseudo-elements css-variables css3 css3-animations dark-mode flexbox-css font-awesome html5 media-embed media-queries responsive-layout semantic-tags vendor-prefix web-development

Last synced: 09 Apr 2025

https://github.com/divyanshu013/media

Simplify media queries for CSS in JS πŸ’ƒ

css-in-js media-queries

Last synced: 17 Mar 2025

https://github.com/hamzashahbaz/responsive-sass-mixin

πŸ“±πŸ’»πŸ–₯ Sass responsive utility mixin for major screen sizes.

css media-queries responsive sass sass-mixins

Last synced: 27 Mar 2025

https://github.com/jomagene/four-card-feature-section

A nice layout-based challenge from frontend mentor, to test multi-column and responsive layouts, using Sass, flex and grid

flexbox-grid media-queries sass

Last synced: 17 Nov 2024

https://github.com/osamaayub/learning-journal

Solo Learning Journal Project Scrimba Responsive Design Module

css3 html5 media-queries

Last synced: 13 Apr 2025

https://github.com/geekykiran/university-website

A fully responsive university website built with HTML and advanced CSS techniques. Features modern design principles like animations, transitions, flexbox, and grid for a seamless user experience. Perfect for showcasing academic institutions online! πŸŽ“βœ¨

animation-css css3 html5 media-queries

Last synced: 01 Apr 2025

https://github.com/clouby/media-queries-min

β¦Ώ - Simplest way to match media queries using Child Functions and Hooks.

hooks media-queries react

Last synced: 20 Mar 2025

https://github.com/evavic44/picture-element

A tutorial for explaining how to use the html picture element

css html html5 media-queries picture picture-element picture-tag tutorial tutorial-code

Last synced: 01 Apr 2025

https://github.com/mk-manishkumar/business-landing-page

This project is a Business Landing Webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/dance-home-page

This project is a Dance Landing Webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/jomagene/recipice-page

Stylish and Responsive Recipe Page

flexbox font-face marker media-queries

Last synced: 11 Mar 2025

https://github.com/mk-manishkumar/web-design-landing-page

This project is a basic UI webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/narendrakoya999/freecodecamp-projects-html-css-rwd

This Repository contains a List of the 20 Frontend Development Projects using HTML, CSS provided by freeCodeCamp

accessibility css3 es6 html5 javascript media-queries performance responsive-web-design

Last synced: 21 Mar 2025

https://github.com/vighneshdeepweb/react-ui

Modern-UI/UX GTP-3 Website built with react and advanced UI design concepts. Super-friendly for beginners.

gtp-3 media-queries modern-ui react reactjs

Last synced: 01 Mar 2025

https://github.com/nallenscott/windshear

React hook for just-in-time component rendering, with first-class support for Tailwind CSS ⛡️

breakpoints hooks just-in-time media-queries pinpoint-accuracy react react-hooks tailwind-css viewport-dimensions

Last synced: 22 Feb 2025

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

Responsive and interactive solution to the Frontend Mentor "Article Preview Component" challenge. Built with semantic HTML, Sass/SCSS, and JavaScript, this project features a responsive layout, hover states, and a share button that toggles social media links for an enhanced user experience.

flexbox media-queries querystring sass tooltip

Last synced: 26 Feb 2025

https://github.com/haxe-react/haxe-react-media

CSS media queries for Haxe React.

haxe media-queries reactjs

Last synced: 25 Mar 2025

https://github.com/aganglada/use-react-media

⚑ react-media with Hooks

hooks media-queries react react-media

Last synced: 05 Mar 2025

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

simple landing page using Bootstrap5 , html , css and Javascript

bootstrap5 css github-pages html javascript media-queries

Last synced: 12 Mar 2025

https://github.com/sofiane-abou-abderrahim/react-course-goals

I dived in and React.js and built a small course goals demo from scratch! I used Reactjs, Hooks, Conditional & Dynamic Styles, Styled Components, Dynamic Props, CSS Modules, Dynamic Inline Styles, Dynamic CSS Classes, Media Queries and way more!

conditional-styling css-modules dynamic-css-classes dynamic-inline-styles dynamic-props dynamic-styles media-queries react react-components react-hooks reactjs styled-components

Last synced: 03 Apr 2025

https://github.com/mk-manishkumar/street-style-landing-page

This project is a basic UI project which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/law-home-page

A basic UI webpage which is fully responsive and created by HTML and CSS

css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mohamedkhamismostafa/special-design-template

I benefited a lot in making this wonderful project, in which I limited some of my skills to HTML, CSS, and vanilla JavaScript.

css html-css-javascript html5 media-queries pure-css pure-html-css-javascript pure-javascript

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/hosting-landing-page

This project is a Hosting Landing Webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/saoudi-h/tw-screens

React hooks for using Tailwind CSS breakpoints easily and efficiently.

breakpoint breakpoints css design gatsby hook hooks media-queries mediaquery nextjs npm-package pnpm react remix responsive tailwindcss web

Last synced: 15 Dec 2024

https://github.com/jomagene/testimonial-grid

A responsive testimonial grid built with CSS Grid and flex-box, semantic HTML, and Sass/SCSS. Designed to adapt across devices with clean, maintainable code.

flexbox grid-layout media-queries sass

Last synced: 17 Nov 2024

https://github.com/webmural/wall

@webmural wall template featuring empty HTML wall with responsive CSS including color mode media queries with @s9a style

css html media-queries plantilla responsive template templates

Last synced: 24 Mar 2025

https://github.com/vitoriabarbosa/globaltech

Projeto Web - Site EstÑtico de um profissional da Ñrea de TI para promover sua marca e seus serviços.

css3 html5 javascript media-queries

Last synced: 15 Mar 2025

https://github.com/jomagene/meet-landing-page

Responsive Meet landing page built with semantic HTML, Sass, and Flexbox and media querry

flexbox media-queries sass semantic

Last synced: 17 Nov 2024

https://github.com/narendrakoya999/react.js-interview-questions-list

This Repository contains List of Frontend Development Interview Questions

css3 es6 html5 javascript jsx media-queries reactjs redux responsive-web-design

Last synced: 21 Mar 2025

https://github.com/bitstarr/ruleemall

A helper for finding the right CSS breakpoints

css media-queries viewport

Last synced: 27 Mar 2025

https://github.com/martapolii/www.polishchukart.com

This is a personal project built for a Toronto-based artist. The site showcases a gallery of his artwork, a CV highlighting his exhibitions, and contact information. The site uses HTML, CSS, and JavaScript for responsive design, gallery overlays, and mobile navigation.

css frontend gallery-images gallery-overlay html javascript media-queries mobile-navigation responsive-design web-development

Last synced: 02 Mar 2025

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

ΠžΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹ΠΉ сайт с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрсткой - Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΡƒΡ‡Π΅Π±Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π² ЯндСкс.ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠΌΠ΅.

bem-methodology css-animations flexbox grid html5 media-queries

Last synced: 13 Mar 2025

https://github.com/dev-rasels/natours-old-style-template

This is a HTML5 CSS3 Advance css and animation practice project template.

advance-css button buttons css-animations float html5 media-queries sass-mixins transition-animation

Last synced: 22 Feb 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/mahmoudaliaboelhassan/leon-template

The website is a demo of a template called "Leon," designed for businesses or individuals to showcase their products or services. It has a minimalist design with a hero section and several sections highlighting different features.

css css-flexbox font-awesome google-fonts grid-system html media-queries responsive-design transition-animation

Last synced: 22 Feb 2025

https://github.com/svendolin/all-kind-of-webprojects

miscellaneous webprojects using html, css and js + home of some responsive layout projects

css html javascript jquery media-queries responsive responsive-design webproject

Last synced: 13 Mar 2025

https://github.com/manu-karenite/guess-the-number

Contains a simple Web Application for a game called Guess -The- Number , bulit using HTML , CSS and JavaScript. The Web Application is totally reponsive in nature created with the help of Media Queries.

css3 cssgrid html5 javascript media-queries

Last synced: 22 Mar 2025

https://github.com/adriwco/gridblog

Layout responsivo utilizando propriedades do Grid Layout.

css github-pages grid-layout html landing-pages media-queries

Last synced: 26 Mar 2025

https://github.com/manu-karenite/responsivewebpage

This is my first repository which contains my first Webpage which is Responsive in Nature prepared with Media Query(s) in CSS file.

css3 cssgrid html html5 media-queries

Last synced: 22 Mar 2025

https://github.com/Lorellana21/Glamping-landing-page

This is my adaptation of the Module 1`s final test aimed to develop a landing page under a given design and to resolve several points. I have used the project I created as an entrepreneur: Glamping Al-Andalus.

css-animations css-flexbox css-grid css3 homepage html5 landing-page layout media-queries sass transition zeplin

Last synced: 12 Mar 2025

https://github.com/bilalahmed804/charity-tamplate

Charity Tamplate frontend

bootstrap5 html-css media-queries

Last synced: 02 Mar 2025

https://github.com/monsara/witcher

HTML layout and styling of a responsive web page with copy code functionality by pressing a button copy code. Web page based on a semantic responsive markup on BEM methodology.

bem css flexbox gulp html javascript media-queries responsive-web-design sass

Last synced: 17 Feb 2025

https://github.com/shant0786/natours-old-style-template

This is a HTML5 CSS3 Advance css and animation practice project template.

advance-css button buttons css-animations float html5 media-queries sass-mixins transition-animation

Last synced: 24 Jan 2025

https://github.com/mk-manishkumar/product-home-page

This project is a basic UI webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/developer-landing-page

This project is a basic UI webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/khizarwakeel/html-css-hackathon

Module 1 Hackathon by Sir Ghous Ahmed (SMIT) Batch 11 2024

bootstrap5 css3 hackathon html5 media-queries

Last synced: 01 Mar 2025

https://github.com/mpopv/pxsmlx

A Sass mixin library for concisely generating sets of single-property media queries

bootstrap-breakpoints breakpoint breakpoints css css3 media-queries mixin-library mixins sass sass-library sass-mixins scss scss-library scss-mixin scss-mixins

Last synced: 27 Mar 2025

https://github.com/al-rasels/natours-old-style-template

This is a HTML5 CSS3 Advance css and animation practice project template.

advance-css button buttons css-animations float html5 media-queries sass-mixins transition-animation

Last synced: 01 Mar 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/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/octet-stream/tailwindcss-device

TailwindCSS plugin to add variants for input device detection using `@media` queries

media-queries postcss tailwindcss tailwindcss-plugin

Last synced: 04 Mar 2025

https://github.com/nafisnihal/react-course-planner

Responsive React.js App using vanilla CSS and browser local storage.

css local-storage media-queries reactjs

Last synced: 06 Mar 2025

https://github.com/cba85/simple-flexbox-navbar

A bootstrap-like simple navigation bar using only CSS flexbox and media queries.

css flexbox media-queries navbar

Last synced: 04 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/kumarabhishek/react-mql

CSS Media Queries HOC and MediaContext for React

javascript media-queries reactjs

Last synced: 31 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/stefan22/rw2

all-in | bootstrap 4 (new features, all features) to build these pages, [Created December 23, 2017 ]

accordion-plugin badges buttons carousel forms grid-layout icon-font images media-queries mobile-first modals navigation popups scrollspy tables tabs tooltips

Last synced: 10 Mar 2025

https://github.com/mesbol6647/html-css-projects

This repository contains some small-scale, basic level projects I worked on when I first started learning HTML and CSS.

css-flexbox css-grid css-grid-template css3 html-template html5 media-queries

Last synced: 09 Apr 2025

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

This is A Product Preview Card Component Project Using HTML5 and CSS3

css3 css3-flexbox html5 media-queries

Last synced: 21 Mar 2025

https://github.com/yerrouhamza/gpt-3_reactjs

GPT-3: Landing page created with ReactJS

css css3 javascript media-queries react reactjs scss

Last synced: 24 Feb 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/mk-manishkumar/interior-design-landing-page

This project is a Interior Design Webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/digital-marketing-home-page

A basic UI webpage which is fully responsive and created by HTML and CSS

css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/plant-home-page

This project is a basic UI webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/saas-landing-page

This project is a SAAS Landing Webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 27 Feb 2025

https://github.com/mk-manishkumar/crypto-landing-page

A basic UI webpage which is fully responsive and created by HTML and CSS

css-grid css3 html5 media-queries

Last synced: 27 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/gitusergb/myyoutube

This web application is a clone of YouTube, built using React JS and Material UI.

material-ui media-queries rapidapi react

Last synced: 30 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

Media Queries Awesome Lists
Media Queries Categories