Is there somewhere, a course, or a website where I can learn more about media queries specifically?
Hi @nevismanuk and welcome to the forums.
I find this site a good reference: https://css-tricks.com/css-media-queries/
Hope it helps,
Andres
2 Likes
w3Schools has some information on media queries if you haven’t checked that out yet:
CSS3 Media Queries
RWD Media Queries
Media Query Examples
Here are some other sources with information on them:
CSS Media Queries
Using Media Queries
Media Queries Demystified: CSS Min-Width and Max-Width
Media Query Size References for Various Devices
Hopefully you find some useful information from one of these!
Thank you very much.
2 Likes
Media queries is a 1 hour topic. This CSS Media Queries is a good tutorial to star with this topic. Well personally I don’t think that designers today use media queries because most of them have shifted to bootstrap 4.
Seriously?
And even if that were true, how does bootstrap handle responsive design? Does it not use media queries?
2 Likes
Bootstrap has grids we use grid and they do the responsiveness on the backhand. In bootstrap you don’t need knowledge of responsive design by media queries.
But what if you need to adjust the layout in some way? Surely you still need to understand media queries to be able to use bootstrap effectively? It’s a tool, not a “wysiwyg” type substitute for learning CSS.
1 Like
I have made complete websites with bootstrap only with no need of media queries at all. But surely when you have to do very great detail work then you will have to also apply media queries.
But mostly for small & medium works no need for media queries at all.
That would explain the endless number of posts we get here by people using Bootstrap who hit a brick wall trying to get their design to work.
There is no substitute for knowing CSS.
3 Likes
Are you saying that Bootstrap 4 does not have any media queries in its core css?
Or is it, which seems more likely, that you have not needed to add any queries yourself, because the queries are already in the Bootstrap css?
3 Likes
What happens if there is a need to change a design detail for mobile/desktop? Perhaps a background image is used at larger screen sizes but not at smaller ones, or a simplified logo is used for mobile. These are common occurrences, I would have thought, and I can’t see how it would be possible to achieve these changes without knowledge of media queries.
My point is that in order to use bootstrap (or any other CSS framework) effectively, you do need a good understanding of CSS, as well as the rules for the framework. There seems to be a common misapprehension that bootstrap is somehow a substitute for a sound basic knowledge of CSS, and that is not the case.
Media queries may seem daunting at first, but once you start playing with them, you realise they are actually quite straightforward. They should not take long to learn.
3 Likes
Bootstrap4 does not use css grid but uses flexbox to create its layout. It calls it a grid structure but has nothing to with css grid as such 
Bootstrap is wholly dependent on media queries and has a whole range of them predefined by default in order to arrange the columns at smaller screen sizes. This is its biggest flaw as it takes no account of the design and why most professional coders avoid bootstrap.
Bootstrap can be useful as part of a large team or for a quick demo or for beginners but in reality it is just another layer on top of css that gets in the way. The things bootstrap does as far as laying out a page are concerned are far simpler using basic css.
I would advise that all beginners have a good understanding of CSS and media queries before learning bootstrap otherwise bootstrap becomes a crutch and not a tool.
6 Likes
I suggest to read the media query to this link( https://www.w3schools.com/css/css3_mediaqueries_ex.asp) .when you are not using the bootstrap then go to this link.It is really helpful for all. Before, I also learn from the w3school link.
Hi Vintagecoders786,
The w3school could be useful for learning but it doesn’t always have the best info.
Also look at the Mozilla Dev and their links for more details in different web techniques. E.g:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.