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/
Related
I am currently studying responsive concept and media queries, and I havent be able to understand the purpose of it, since we can use "%" for size properties in our CSS files. In fact for example in my CSS file if I add the "width" style property like this : "{width: 70%;}", my Web page will fit into any screen sizes because it will take 70% of it, without regarding the screen ? Or maybe she will be displayed with too small characters, that would be the explanation of why we use responsive methods ? It seems like maybe I didnt really get the purpose of it. Thank you for all your help.
Have you used a news website? In broad devices like laptops, there are multiple columns across the screens. While you use the same website on mobile phone, a single column takes all the available space. This is where responsive design and media queries come in. You can observe the same effect almost everywhere on the web.
Suppose if the news website had set the width of each column as 25%, the it would look good on a laptop, but the width of each column would be then very less when you view it in mobile phone (as 25% of mobile screen width would be very low) and this would make the text unreadable. This is why % units don't work everywhere and we need responsive design and media queries.
This is not the only use of media queries. You can even specify how your webpage will look when printed with the help of media queries. Modern css frameworks like Bootstrap are completely based on media queries
Still if you have any doubts related to the use of responsive techniques like media queries, you can just google "uses of media query" or "uses of responsive design" and you will get tons of articles and posts on their usability.
The use of % and other units can be done to a small extent but they don't give us the freedom responsive design gives us. Responsive design is more than using such units.
I've finished a layout for the website I'm designing using DIVI and it looked perfect on my 1280x800 laptop resolution, but when I tried to display it on the bigger resolution (in this case 1920x1080) a lot of the elements (mainly the ones with left or right margins/paddings) were out of place. I've tried using percentages instead of pixels as my margin/padding values, but gave the same result.
What would be the best practice in going about designing responsive CSS layouts? Should I define fixed values for width of the containers? Will that solve the issues?
Should I focus on media queries? Define values for each resolution? Then again, there's the issue of resizing the window which again would make the whole media query solution obsolete. What are your suggestions?
RWD (Responsive Web Design) is an argument too broad to give you a single answer. Personally I love building my own web pages from scratch, without any page builder or something like that, and this's the tip I give you: first, try to build your own web pages by hand!
Three guidelines I can give you to build a responsive website are:
Use percentage values, no fixed values;
Use media queries;
Use the display: flex property to adapt the layout of webpages when the screen width changes;
With these advices I think you can build easily your responsive web pages.
There are many other factors to worry about: search, learn and get your hands dirty with code!
I'm designing a mobile-first site and the thing is, height-based media queries could really benefit my page layout in many ways. But I am holding myself from using them because like more than 90% articles I've read about responsive design don't even mention vertical media queries.
Even mixin libraries exclude them like the one I use (Rupture). And here in SO they don't recommend using it. It really feels like it's a broken feature or has loads of compatibility issues...
I just noticed Instagram uses min-height on their mobile site So I thought maybe it's really safe to use them.
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!
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.