I am working on creating my site using Yahoo's Pure CSS modules(http://purecss.io/). I really like it so far. One thing I don't understand is how the media queries fit into it. Here is what it says on their grids page:
Default Media Queries
When using Responsive Grids, you can control how the grid behaves at
specific breakpoints by adding class names. Pure's default responsive
grids comes with the following class names and media query
breakpoints.
So I want to add some custom handling at the "xl" breakpoint. How do I do that? Also, how do I know which class to put my content into? I have used media queries before. I just can't quite wrap my head around how they did it here.
Hi i my self use pure because bootstrap is boring and bloated why not try something out of the box...the break point is easy on the xl query place your css class be that pures grid even they all can be broken so lets say .sidebar you want it gone on xl place that clas there..you can costumize the breakpoint on their site as well for different screen size if thats what your looking for. I hope this helps...but I am not sure if you are using WordPress but my purecss wp theme will be out shortly for developers and designers!
Related
I am new to front end development and recently came across media queries and how they work.
I learnt bootstrap prior to media queries and now I am wondering is media query necessary? I feel Bootstrap does the same thing when you create grids and mention the column class name i.e col-2-sm xs, lg etc and gives the responsive feel. Could somebody please guide when what must be used?
Bootstrap is a CSS framework, if you want to use it, you'll have to learn it. Or write your own queries.
And btw, it's col-sm-2 meaning if the screen width is small(≥576px), it should give the div the width of two columns.
Media queries and Bootstrap are two different approaches. you can use bootstrap to make responsive web design without any knowledge about media query because bootstrap has grid system which allow you to make RWD but you can learn media query to make your own grid system or make some change on any size you want
to read and learn about Media Query :
https://www.w3.org/TR/mediaqueries-4/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Bootstrap 4 Grid System :
https://getbootstrap.com/docs/4.0/layout/grid/#
Bootstrap 4 Grid System :
https://getbootstrap.com/docs/5.0/layout/grid/
I'm a little bit confuse when using Media query for responsive web design.
Actually, I'm new to it and I also want to ask that: is it necessary to add media query every single time you have a CSS error when shrinking down the web browser? I used to do it and my css had like a lot of media queries in it!
You should use media queries when you want to specify different style for a particular height/width of the screen.
Media queries can also be used to change layout of a page depending on the orientation of the browser.
Please use this link to find out more..
7 Practices for Effective Media Queries
Do use media query to design layout for desktop version. You should always think for mobile first layout then use media query to decide how should it look like in desktop version of site.
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
I have been given a task to convert an already hosted website into responsive. My working knowledge on CSS is below average.
In that quest, I heard about media queries. I looked for a solution, but what I got was more confusion. Media Queries? I tried responsinator.com and checked my website in that. Actually I don't know how to know whether a website is responsive or not.
My website fits the mobile screens. Header and footer automatically adjusts themselves.
There is a big slider and it just got cropped, but still loads images and works fine. If my website is responsive, how come the slider get cropped?
To make a responsive CSS, Will I have to make any changes to the values in my already existing CSS? Or will I have to just add my styles (without any edits) into the media queries given below.
#media(max-width:480px){
/*PUT YOUR CLASSES STYLES HERE*/
}
your media query defines which part of your css to look in, think of it like an if statement.
When it falls within a media query in your css file, your css has be defined to cater for that screen size,
Just because your page objects crop when you make the screen smaller does not make your site responsive,
best take your phone or tablet and visit your site, if the user interface is simple, easy and smooth, then you dont have to worry, but if you have a desktop styled site on a phone as wide as your numpad on the keyboard, you have some work to do.
It's quite difficult from my experience to "convert" a static website into a responsive one, especially if you do not have good CSS knowledge. Try to find elements with a fixed width and make them fluid by experimenting with max-width and procentual width values. Hope this helps.
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/