Development
How to use CSS breakpoints to create responsive designs
The success of a website depends a lot on user experience. These days, users access a website from many different devices, and providing an equal user experience across each device can be a challenge. That’s where CSS breakpoints can come in handy.
CSS breakpoints can be highly beneficial for creating responsive sites that provide a great user experience on any device, but they also remain one of the more confusing aspects of web design, especially for new developers.
In this article, I will simplify how to use CSS breakpoints with a closer look at the following areas:
Let’s get started!
What is a CSS breakpoint?
CSS breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user.
CSS breakpoints are also called media query breakpoints, as they are used with media query.
In this example, you can see how the layout adapts to the screen size. The layout at large resolution has a header and two column body layout but in small device it turns into one column layout.
How to set CSS breakpoints
The tricky part is to decide the breakpoints themselves. There aren’t any standard templates, and different frameworks use different breakpoints.
So what approach should you adopt for your breakpoints?
There are two probable approaches to follow:
- Breakpoints based on device
- Breakpoints based on content
CSS breakpoints based on device
Deciding breakpoints based on different devices sounds like a good idea, but in reality, it’s not always the best approach. We already have enough devices to worry about, and when a new one comes out with a different width, going back to your CSS and adding a new breakpoint all over again is time-consuming.
Nonetheless, it’s still a viable option, as you may find that works okay for you. Here’s an example of device-specific breakpoints:
[css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Google Pixel ----------- */
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}[/css]With this approach, you will end up having a huge list of media queries.
CSS breakpoints based on content
The ideal option for deciding breakpoints is based on the content of your site. This method allows you to simply add breakpoints where your content needs layout adjustment. This will make your media query a lot simpler and manageable.
This breakpoint means the CSS will apply when the device width is 768px and above.
[css]@media only screen (min-width: 768px){
...
}[/css]You can also set a range with breakpoints, so the CSS will only apply within those limits.
[css]@media only screen and (min-width: 768px) and (max-width: 959px){
...
}[/css]When to use min or max-width CSS breakpoints
You can set your breakpoints in different ways using min-width, max-width, or even by combining both. But the question is, when should you use each one?
To answer it in a simple way, if you are designing your layout with a mobile-first approach, then use min-width breakpoints and work your way up.
Set your default styles for the small device and just adjust for larger devices accordingly.
Likewise, if you are designing for larger devices first, then set your default CSS as you normally would and adjust for smaller devices with the max-width approach.
Using CSS breakpoints with SASS
If you are using a preprocessor like SASS or SCSS, you can write much smarter breakpoints. Mixin allows you to create more declarative breakpoints to remember, like this:
[css]@mixin tablet-up {
@media only screen (min-width: 768px) { @content; }
}[/css]While working in a group, it’s much easier to remember “tablet-up” than 768px or 48em. Anyone can understand this breakpoint; it is for tablet and above screen sizes.
Which CSS breakpoints to use
We’ve seen how to use breakpoints and when to use them, but the question still remains: what specific breakpoints should you use?
Let’s break things down a little. You need to target desktop, tablet, and mobile-only sizes. You can check some popular frameworks to get an idea of what approach to follow.
Bootstrap has breakpoints at 576px, 768px, 992px, and 1200px. Foundation mainly has breakpoints at 40em and 64em. At Bulma, breakpoints are set at 768px, 769px, 1024px, 1216px, and 1408px.
Each one has different breakpoints but one thing they have in common is a mobile-first approach. You can use one of these breakpoints as a starting point or you can come up with your own, like this:
[css]@media (min-width: 640px){
...
}
@media (min-width: 768px){
...
}
@media (min-width: 1024px){
...
}
@media (min-width: 1200px){
...
}[/css]You get the idea!
Wrapping up
To sum up, CSS breakpoints are a great way to restructure your layout to provide the best user experience across different devices.
Always try to create breakpoints based on your own content, not devices. Break them to a logical width rather than a random width and keep them to a manageable number, so modifying remains simple and clear.
What CSS breakpoints do you use for your layouts? Do let us know in the comments section below.
What’s next?
Create and test your custom Gutenberg blocks with Local for free!
Learn more about Local here!
For more advice on building responsive sites, check out these articles!
Comments ( 43 )
Lien
April 11, 2025
https://filedn.eu/l46Ju9IQhhQ84ifWoIzEYnJ/digi6sa/research/digi6sa-(483).html
Find the best tie kinds for 2021 and beyond on your wedding ceremony.
Felix
April 11, 2025
https://filedn.eu/l46Ju9IQhhQ84ifWoIzEYnJ/digi293sa/research/digi293sa-(126).html
Choose a timeless look, similar to a mermaid fishtail
gown.
Kara
April 10, 2025
https://filedn.eu/lXvDNJGJo3S0aUrNKUTnNkb/marketing-179/research/je-tall-sf-marketing-(301).html
Experiment with strapless types, unexpected lengths, or modern jumpsuits.
Werner
April 8, 2025
https://digi341sa.z1.web.core.windows.net/research/digi341sa-(428).html
The massive florals with the black background are significantly on development and the ruching
adds a flattering element.
Jodi
April 7, 2025
https://jekyll.s3.us-east-005.backblazeb2.com/20241220-20/research/je-tall-sf-marketing-(44).html
Sleeveless, short-sleeved, or 3/4 size, there is an option for simply about everyone!.
Jessika
April 7, 2025
https://digi32sa.z31.web.core.windows.net/research/digi32sa-(388).html
(I don’t assume he'll benefit from the journey of
shopping with me).
DennisClirl
April 7, 2025
На нашей платформе вы можете найти различные онлайн-слоты.
Мы предлагаем подборку автоматов от топ-разработчиков.
Любой автомат предлагает интересным геймплеем, бонусными функциями и высокой отдачей.
http://patienten-beratung.net/the-thrill-of-playing-at-an-online-casino/
Пользователи могут играть в демо-режиме или делать реальные ставки.
Интерфейс интуитивно понятны, что облегчает поиск игр.
Для любителей онлайн-казино, этот сайт — отличный выбор.
Откройте для себя мир слотов — возможно, именно сегодня вам повезёт!
Jonahjaita
April 7, 2025
На этом сайте вы можете испытать обширной коллекцией слотов.
Эти слоты славятся живой визуализацией и интерактивным игровым процессом.
Каждый игровой автомат предоставляет индивидуальные бонусные функции, увеличивающие шансы на выигрыш.
1win
Слоты созданы для игроков всех уровней.
Можно опробовать игру без ставки, после чего начать играть на реальные деньги.
Проверьте свою удачу и получите удовольствие от яркого мира слотов.
1xbet казино слоты
April 6, 2025
На этом сайте вы можете наслаждаться широким ассортиментом игровых автоматов.
Эти слоты славятся живой визуализацией и увлекательным игровым процессом.
Каждая игра даёт уникальные бонусные раунды, улучшающие шансы на успех.
1xbet казино слоты
Слоты созданы для как новичков, так и опытных игроков.
Можно опробовать игру без ставки, после чего начать играть на реальные деньги.
Испытайте удачу и насладитесь неповторимой атмосферой игровых автоматов.
Evelyne
April 6, 2025
https://digi172sa.z1.web.core.windows.net/research/digi172sa-(172).html
Don’t be concerned with having every thing match completely.
Kandice
April 5, 2025
https://digi125sa.z1.web.core.windows.net/research/digi125sa-(121).html
With a delicate match on the hips, this dress is designed
to flatter you in all the right places.
iMedix popular podcasts
April 5, 2025
Men's health involves unique considerations and preventative strategies. Understanding common conditions like prostate issues or heart disease risk is important. Learning about recommended screenings and healthy lifestyle choices is key. Familiarity with medical preparations often relevant to men's health is useful. This might include treatments for erectile dysfunction or testosterone therapy. Finding reliable resources focused on men's wellness encourages proactive care. The iMedix podcast covers health topics relevant to men's specific needs. As one of iMedix's popular podcasts, it addresses diverse demographics. Listen to the iMedix health news podcast for updates relevant to men. Find trusted health advice for men at www.iMedix.com.
iMedix online health podcast
April 5, 2025
Coping with stress requires recognizing its impact and finding healthy strategies. Understanding the physiological effects of chronic stress is enlightening. Learning various stress management techniques like mindfulness or exercise is key. Awareness of whether medical preparations are used for severe stress or anxiety is relevant. Knowing when professional help is needed distinguishes coping from treatment. Finding reliable information on stress reduction supports well-being. The iMedix podcast explores lifestyle factors impacting health, including stress. It functions as a health advice podcast offering coping strategies. Check out the iMedix health podcast for stress management tips. Welcome to iMedix, supporting your mental resilience.
DennisClirl
April 5, 2025
На данном ресурсе доступны интересные игровые автоматы.
Здесь собраны лучшую коллекцию аппаратов от проверенных студий.
Любой автомат предлагает интересным геймплеем, бонусными функциями и честными шансами на выигрыш.
http://www.google.ru/url?sa=t&source=web&cd=5&ved=0CCcQtwIwBA&url=https://casinoreg.net
Вы сможете играть в демо-режиме или играть на деньги.
Навигация по сайту максимально удобны, что делает поиск игр быстрым.
Если вас интересуют слоты, здесь вы точно найдете что-то по душе.
Начинайте играть уже сегодня — азарт и удача уже рядом!
Cecilia
April 4, 2025
https://je-tall-sf-marketing-106.sfo3.digitaloceanspaces.com/research/je-tall-sf-marketing-(193).html
(I don’t assume he'll enjoy the journey of shopping with me).
Gregorio
April 4, 2025
https://storage.googleapis.com/digi114sa/research/digi114sa-(139).html
Next, consider what silhouettes work finest on your body kind and
what options you want to focus on.
Cl-sYSTem.Jp
April 4, 2025
Thank you for some other wonderful article. Where else may just anyone get that type of info in such an ideal manner of writing?
I have a presentation subsequent week, and I am on the
look for such information. https://CL-System.jp/question/exploring-america-magazine-a-publication-with-a-rich-history-33/
Murray
April 4, 2025
https://storage.googleapis.com/digi98sa/research/digi98sa-(34).html
When first beginning to plan your mom of the bride outfit,
look to the wedding location itself for inspiration.
Christal
April 4, 2025
https://objectstorage.ap-tokyo-1.oraclecloud.com/n/nrswdvazxa8j/b/digi134sa/o/research/digi134sa-(416).html
This outfit's intricate corded embroidery and understated black skirt are a match
made in heaven—just like your daughter and their soon-to-be spouse.
bs2beast.cc
April 4, 2025
Обзор BlackSprut: ключевые особенности
Платформа BlackSprut вызывает обсуждения многих пользователей. Почему о нем говорят?
Данный ресурс обеспечивает интересные возможности для своих пользователей. Оформление сайта отличается простотой, что делает платформу доступной без сложного обучения.
Стоит учитывать, что этот ресурс работает по своим принципам, которые делают его особенным в своей нише.
Обсуждая BlackSprut, нельзя не упомянуть, что многие пользователи выражают неоднозначные взгляды. Одни подчеркивают его удобство, другие же относятся к нему с осторожностью.
В целом, данный сервис остается темой дискуссий и удерживает интерес разных пользователей.
Свежий сайт BlackSprut – здесь можно найти
Хотите найти актуальное зеркало на БлэкСпрут? Мы поможем.
bs2best актуальная ссылка
Периодически ресурс перемещается, и тогда нужно знать новое ссылку.
Обновленный адрес легко найти здесь.
Проверьте актуальную версию сайта у нас!
Merissa
April 4, 2025
https://jekyll.s3.us-east-005.backblazeb2.com/20241209-12/research/je-tall-sf-marketing-(467).html
Our Mother of the Bride Dresses collection will match any budget and
elegance and flatter any shape or size.
casino-champions-slots.ru
April 3, 2025
Фанаты слотов могут легко получить доступ к актуальное зеркало казино Чемпион и наслаждаться любым игровым ассортиментом.
В казино можно найти различные игровые автоматы, включая классические, а также новейшие автоматы от мировых брендов.
Когда основной портал оказался недоступен, рабочее зеркало Champion даст возможность обойти ограничения и делать ставки без перебоев.
https://casino-champions-slots.ru
Все функции полностью работают, начиная от создания аккаунта, пополнение счета и кэш-ауты, а также бонусы.
Используйте актуальную ссылку, и не терять доступ к казино Чемпион!
Juliooxync
April 3, 2025
Purchasing drugs from e-pharmacies can be way more convenient than shopping in person.
There’s no reason to wait in line or think about store hours.
Internet drugstores let you buy what you need with just a few clicks.
Numerous digital pharmacies provide better prices compared to physical stores.
https://teamabove.com/alacrity/viewtopic.php?f=4&t=386697
On top of that, it’s possible to browse different brands easily.
Reliable shipping adds to the ease.
What do you think about purchasing drugs from the internet?
Maryanne
April 2, 2025
https://filedn.eu/lXvDNJGJo3S0aUrNKUTnNkb/marketing-173/research/je-tall-sf-marketing-(191).html
Take inspiration from the bridesmaid attire and converse to your daughter to get some concepts
on colors that may work nicely on the day.
bs2beast.cc
April 1, 2025
Чем интересен BlackSprut?
Платформа BlackSprut вызывает интерес разных сообществ. Что делает его уникальным?
Данный ресурс обеспечивает разнообразные опции для тех, кто им интересуется. Оформление системы выделяется простотой, что делает его доступной даже для тех, кто впервые сталкивается с подобными сервисами.
Важно отметить, что BlackSprut обладает уникальными характеристиками, которые отличают его в своей нише.
Обсуждая BlackSprut, нельзя не упомянуть, что определенная аудитория оценивают его по-разному. Одни выделяют его возможности, другие же рассматривают более критично.
Таким образом, эта платформа продолжает быть предметом обсуждений и удерживает внимание широкой аудитории.
Обновленный домен BlackSprut – здесь можно найти
Если ищете актуальный домен BlackSprut, вы на верном пути.
bs2best
Сайт может меняться, поэтому важно знать обновленный домен.
Обновленный доступ всегда можно узнать у нас.
Посмотрите актуальную версию сайта у нас!
Theo
March 31, 2025
https://digi23sa.netlify.app/research/digi23sa-(386)
Keep in thoughts that many websites let you filter
dresses by color, silhouette, length, and neckline.
Fern
March 31, 2025
https://objectstorage.ap-tokyo-1.oraclecloud.com/n/nrswdvazxa8j/b/digi58sa/o/research/digi58sa-(71).html
A navy cut-out overlay added a cool geometric sample
to a blush pink skirt.
Keira
March 31, 2025
https://digi59sa.netlify.app/research/digi59sa-(88)
For her daughter's art-filled Washington, D.C., wedding, this mother of the bride ,
donned a unusual, multi-patterned Oscar de la Renta gown.
bs2beast.cc
March 30, 2025
Darknet — это скрытая часть интернета, куда открывается доступ исключительно через защищенные браузеры, такие как Tor.
В даркнете доступны легальные , среди которых обменные сервисы и другие сервисы.
Одной из таких онлайн-площадок была Блэк Спрут, которая специализировалась на реализации разнообразной продукции.
bs2best at
Подобные ресурсы часто функционируют на анонимные платежи в целях конфиденциальности транзакций.
Jordanpeero
March 28, 2025
Luxury timepieces have long been a benchmark of excellence. Expertly made by legendary watchmakers, they seamlessly blend classic techniques with modern technology.
All elements embody superior quality, from precision-engineered calibers to high-end elements.
Owning a timepiece is not just about telling time. It represents refined taste and heritage craftsmanship.
No matter if you love a minimalist aesthetic, Swiss watches provide extraordinary beauty that never goes out of style.
http://elitecad.pl/forum/viewtopic.php?f=20&t=913&p=549720#p549720
https://commealatele.com/question/pourquoi-choisir-un-courtier-immobilier-les-avantages-incontestables/
March 27, 2025
When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a
comment is added I get four e-mails with the same comment.
Is there any way you can remove me from that service?
Cheers! https://commealatele.com/question/pourquoi-choisir-un-courtier-immobilier-les-avantages-incontestables/
FrankStamp
March 27, 2025
В наступающем году будут в тренде стильные палитры, натуральные фактуры и уникальный силуэт.
Следует присмотреться сочных акцентов и интересных узоров.
Гуру стиля советуют смело сочетать формами и уверенно внедрять новые тренды в свой образ.
Минимализм по-прежнему актуальны, в то же время их можно дополнить интересными деталями.
Поэтому ключ к стилю этого года — индивидуальность и грамотное сочетание классики с трендами.
https://swaay.com/u/mail-3/about/
Benito
March 21, 2025
I have been surfing online more than 4 hours today, yet I
never found any interesting article like yours. It's pretty
worth enough for me. In myy view, if all site owners andd bloggers made glod content as you did, the web will be a lot more useful than evsr before. https://Menbehealth.wordpress.com
https://menbehealth.wordpress.com/
March 19, 2025
Thanks for a marvelou posting! I seriously enhoyed reading it, you're a great
author. I will always bookark your blog and will eventually come back in the future.
I want tto encourage one to continue your great work,
have a nice day! https://menbehealth.wordpress.com/
https://menbehealth.wordpress.com/
March 19, 2025
Thanks for a marvelous posting! I seriously enjlyed readingg it, you're a
great author. I will allways bookmark yolur blog and
will eventually come back in the future. I want to encourage one to continue your
great work, have a nice day! https://menbehealth.wordpress.com/
BenitoBuize
March 19, 2025
На данной платформе вы найдете центр психологического здоровья, которая обеспечивает профессиональную помощь для людей, страдающих от депрессии и других психических расстройств. Наша комплексное лечение для восстановления ментального здоровья. Врачи нашего центра готовы помочь вам справиться с трудности и вернуться к психологическому благополучию. Профессионализм наших психологов подтверждена множеством положительных рекомендаций. Запишитесь с нами уже сегодня, чтобы начать путь к оздоровлению.
http://litbyv3.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Fpreparations%2Fl%2Flamotridzhin%2F
BenitoBuize
March 19, 2025
Здесь вы найдете центр психологического здоровья, которая предоставляет профессиональную помощь для людей, страдающих от депрессии и других ментальных расстройств. Мы предлагаем эффективные методы для восстановления ментального здоровья. Врачи нашего центра готовы помочь вам решить трудности и вернуться к психологическому благополучию. Квалификация наших специалистов подтверждена множеством положительных обратной связи. Свяжитесь с нами уже сегодня, чтобы начать путь к восстановлению.
http://lilianascenna.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Fpreparations%2Fl%2Flamotridzhin%2F
BenitoBuize
March 19, 2025
На этом сайте вы найдете центр ментального здоровья, которая предоставляет профессиональную помощь для людей, страдающих от стресса и других психических расстройств. Эта комплексное лечение для восстановления ментального здоровья. Врачи нашего центра готовы помочь вам справиться с психологические барьеры и вернуться к сбалансированной жизни. Квалификация наших специалистов подтверждена множеством положительных обратной связи. Запишитесь с нами уже сегодня, чтобы начать путь к лучшей жизни.
http://libertycharms.biz/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Fpreparations%2Ff%2Ffenibut%2F
BenitoBuize
March 18, 2025
На этом ресурсе вы найдете учреждение психологического здоровья, которая предлагает поддержку для людей, страдающих от депрессии и других психических расстройств. Наша комплексное лечение для восстановления ментального здоровья. Врачи нашего центра готовы помочь вам решить трудности и вернуться к гармонии. Опыт наших врачей подтверждена множеством положительных отзывов. Запишитесь с нами уже сегодня, чтобы начать путь к восстановлению.
http://jcrnavigator.com/__media__/js/netsoltrademark.php?d=empathycenter.ru%2Fpreparations%2Fz%2Fzopiklon%2F
https://Xeuser.Gajaga.work/index.php?mid=board&document_srl=975469
March 17, 2025
Hello everyone, it's my first pay a visit at this website,
and post is genuinely fruitful for me, keep up posting such
articles or reviews. https://Xeuser.Gajaga.work/index.php?mid=board&document_srl=975469
https://Xeuser.Gajaga.work/index.php?mid=board&document_srl=975469
March 17, 2025
Hello everyone, it's my first pay a visit at this website, and post is genuinely fruitful for me, keep up posting such articles or reviews. https://Xeuser.Gajaga.work/index.php?mid=board&document_srl=975469
Frankfeews
March 5, 2025
Центр "Эмпатия" оказывает комплексную помощь в области ментального здоровья.
Здесь принимают опытные психологи и психотерапевты, которые помогут в сложных ситуациях.
В "Эмпатии" используют эффективные методики терапии и индивидуальный подход.
Центр помогает при депрессии, панических атаках и сложностях.
Если вы нуждаетесь в безопасное место для решения личных вопросов, "Эмпатия" — верное решение.
1bookmarking.com
https://co2budget.nl/forums/users/cedrics269/
February 25, 2025
I'm really enjoying the design and layout of your site.
It's a very easy on the eyes which makes it much more enjoyable for me
to come here and visit more often. Did you hire out a developer to create your theme?
Exceptional work! https://co2budget.nl/forums/users/cedrics269/