New coder here needing some help with the basics of HTML and CSS with Media Queries. I have 3 elements (logo, decorative line, and text) on one page that I simply want to be able to move dynamically no matter what the screen size is. These are some guiding rules that my teacher provided for us to follow screen sizes for desktop, tablet, and mobile screens:
/*mobile view: 1 tile */ @media only screen and (max-width : 480px) {
/----- tablet view vertical: 2 tiles -------/ @media only screen and (max-width : 650px) and (min-width : 481px){
/----- tablet view horizontal: 3 tiles -------/ @media only screen and (max-width : 1050px) and (min-width : 651px){
What is the most basic setup that I can code in my CSS file to make these 3 elements to move fluidly within these screen dimensions? Would you recommend these screen dimensions be adjusted?Appreciate any insights!
@anglinb I would avoid using both min and max in the same media queries when possible. (sometimes they’re used for very specific fixes for a set of screen sizes.)
If the group you’re working for is using a mobile first approach, you’ll build your site on mobile first, and then as you enlarge your screen sizes to accomodate for larger devices, you’ll add the min-width media queries to adjust appropriately for your new spacious digs. This is the best approach in 2019.
Historically, and still happening to this day, many places build their desktop experience first, and in that case if you’re writing custom media queries you’ll probably be modifying as you shrink your screen size, and so (max-width:XXXpx) becomes a lot more common there.
Most modern builders use a framework like bootstrap to handle their grid and common layout related media query needs.
Here are the queries in bootstrap 3 for example:
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Note that the iPad is 768px wide, and a very common tablet. Check the media query for tablet sizes.
Where is the max width 1920 ree @anglinb I suggest (if this helps) to make a few different layouts if you’re making a complex website. In this case, try the following (triple backticks, the things next to 1, to make block code)
<style>
/* Desktop View, huge screen */
@media screen and (max-width: 1920px) {
/* Thing with the changing layout */ {
width: 25%; /* 4 columns, change this as you wish */
}
}
/* Horizontal Tablet */
@media screen and (max-width: 1050px) {
/* Thing with the changing layout */ {
width: 33%; /* 3 columns, change this as you wish */
}
}
/* Tablet View */
@media screen and (max-width: 650px) {
/* Thing with the changing layout */ {
width: 50%; /* 2 columns, change this as you wish */
}
}
/* Phone View, probably */
@media screen and (max-width: 480px) {
/* Thing with the changing layout */ {
width: 100%; /* 1 column*/
}
}
</style>