Does anyone know how to accomplish a different layout based on the browser width, like these two sites?
http://sasquatchfestival.com/
http://css-tricks.com/
I've tried to Google it, look through Stackoverflow questions, and look at their code but I think I am missing something. It actually rearranges and resizes some elements based on the width of the window, but how? Javascript?
Sorry if my search skills are just failing, but I'm not really sure what to look up, the "similar questions" here don't seem related, and even CSS-Tricks doesn't have the info in an easy to find place.
You don't need to use JS to detect browser width. You can simply use CSS media queries to alter the layout.
For example:
#media screen and (max-width: 1280px) {
... selector(s) here ...
}
Will apply CSS only to screens that are at most 1280px wide.
See also:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
You can use CSS3 media queries to deliver different styles based on the screen width. See here for more info: http://www.css3.info/preview/media-queries/
If you look at the CSS source of the sasquatchfestival.com site, for example, you can see what they're doing: http://sasquatchfestival.com/css/screen.css?v=1328828795. Search for "#media only screen" and you'll see they're delivering different CSS for widths below 768px, between 768-1024px, and above 1024px.
You can reinvent the wheel or merely build/rebuild your web site using one of the many responsive frameworks that are available. I have used both 'Skeleton' and 'Bootstrap by Twitter' Their frameworks can be found at...
Skeleton... [http://www.getskeleton.com/][1]
Bootstrap... [http://twitter.github.com/bootstrap/][2]
I have built sites using each...
Skeleton... [http://72t.net][3]
Bootstrap... [http://ReactiveWebDesign.net][4]
I'm still trying to decide which I prefer, but right now boot strap seems to offer more features.
May be a little bit of jMasonry in there, but it also looks a little like what Twitter Bootstrap provides in rails, it might be worth pouring over their static CSS version for answers.
Related
I don't really understand a proper way to ask this, sorry in advance if I lead to confusion.
I need to style HTML elements on my CSS page for mobile viewports and then add a comment where the mobile styles begin. From what I gathered from my book, styling the elements is just changing the fixed sizes to relative sizes, but the second part of the question leads me to believe that I need a whole new set of styles for each element, so how would I have one style for my main for normal view, and then a new style for main for mobile viewport?
Sorry yet again for horrible wording, and I'm not asking for any coding done, just some direction.
Use media queries! Here is the MDN page on them
For example, this will make all h1s red if the viewport is smaller than 600px
#media screen and (max-width: 600px) {
h1 {
color: red;
}
}
If I understand you correctly, you want to create a webpage that's also mobile friendly.
Twitter Bootstrap is the most popular framework for achieving this, and is used in almost every new web application.
I would suggest watching some Bootstrap tutorials on this. Derek Banas has really good introductory tutorials to show you how different languages/frameworks interact.
I wouldn't recommend him for an in depth tutorial on understanding all the in-and-outs of the topics of his video, but he's amazing at showing what the particular topic of the video is excellent at.
Your question isn't much clear.
Consider using media queries in CSS to work with your viewport.
See: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Maybe you like to use some CSS Frameworks to help you, like Bootstrap ou Materialize.
I recommend Bootstrap because learning is easier than Materialize.
I have developed my own introductory website in ASP.NET. I have used only HTML and CSS as I am not good in website designing. But the website is not looking good on mobile phone browser. Can anybody suggest me how can I use/update the same code so that it looks fine in mobile phone browser also without using bootstrapping explicitly?
My website link.
Asp.NET has nothing to do here with Responsive Web Design.
Just create CSS correctly that sets the elements where you want them according to the resolution and your good to go.
To target specific resolution use media queries: resolution
#media screen and (min-width: 480px) {
a {
color: red;
}
}
Also you can use your browser developer tools to see how your page looks in different screen sizes
Even if you do not want to use bootstrap or foundation, looking at their CSS to see how it operates is how I first learned to create responsive pages.
The core of bootstrap is referencing the page width as Pawel Lukasik mentioned above. At it's simplest above a certain width will have 1 style and below a certain width it will have another that determines the postioning / widths / floats of that content on the page.
In the case of bootstrap they have identified these various styles using the various 'grid options'
http://getbootstrap.com/css/#grid-example-basic
I suggest you take a look at the following link. It will give you a rundown on media queries that are used in CSS for responsive design. As mentioned above it is also a very good idea to take a look at the code for Bootstrap. It will give you an idea if how it achieves responsiveness, you can then try to create your own CSS to achieve the desired outcome.
Okay,I designed my webpage to my liking. Finally. But of course, I designed it on a Chromebook with a 1366x768 resolution. So when I looked on my 1600x900 resolution computer, everything is jacked up. How do I use responsive design to get my webpage to look the same on a 1600x900 resolution as it does on a 1366x768? That's just an example. I would eventually like to format my website for mobile phones, but right now, I am focusing on laptop and desktop resolutions. Any help is appreciated, I'm stumped.
If you are not using a framework, such as Bootstrap, then you would have to use CSS's media queries which would allow you to use specific CSS properties depending on the size of the screen of your output device. You can read a clear explanation, at the Mozilla Developer Network, here.
Learning to use them it's not a bad idea, but the most popular means to implement responsive design is using Twitter Bootstrap. Of course you would have to read a lot, but there are a lot of tutorials on how to use the framework and once you are familiar with the grid system and some of it's classes you can make your site responsive quite easily.
The official Bootstrap site and documentation can be found here.
Personally I would suggest you to use Bootstrap since it offers so much functionality without having to make everything from the ground.
This Link may be useful for what you are looking for.
https://spin.atomicobject.com/2015/03/06/bootstrap-add-xl-grid-size-option/
You may use this technique for your need
I've recently been tasked with the of making a website for a department in my school. One problem I've encountered is that the webpage will appear differently on all screens and like to know if it exists some kind of tag or way in css to make it auto adjust on all screens.
There is no easy answer, certainly none that would fit here. Here's a good place to start:
Here is a good introduction to responsive web design, which will help you deal with how your sites will appear on different screen sizes, and different devices. Good luck.
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
Try using media queries. Please check:
Media Queries
Take a look at responsive CSS: W3Schools Responsive CSS. This includes information about how to make your own as well as examples of existing popular frameworks such as Bootstrap and Framework.
First of all: I'm from Germany, so I'm sorry for my bad English... I hope, you'll understand everything!
I am an almost 16-year-old student who is really interested in coding. Next year I'm going to study computer science at the university.
So lately I've begun to learn something about HTML and CSS. To use my new knowledge, I created a "fake-/test-blog" on Blogger.com (from Google).
I found a german tutorial how to write an own template, but this instruction wasn't one for a responsive design. So I tried and tried and achieved success - except from one thing...
The reason, why I am here now, is that I want to create a menu in the navbar, which becomes/turns into a kind of drop-down-menu, if the screen is too small to show the whole menu in line (e.g. on a smarthpone or tablet or a 4:3-screen etc.).
I searched on the internet for a long time, but I found no useful information there. Every instruction I found was with JavaScript, but I need a code that works only with HTML and CSS...
So maybe someone can help me here with links, codes etc. I hope that my problem is understandable and especially solvable!
Thanks in advance!
Ninjo
You could take a look at bootstrap which is a mobile-first framework ideal for makijng something like a responsive navbar.
You could also take a look at pure css which is another nifty framework for achieving this
Also:
As mentioned by Samus Hands you can take a look at media queries
Good luck with the coding & the education
Hope this helps!
With CSS media queries you can know if the screen is too long/small, a exemple using #media screen and (max-width: (or min)...):
#media screen and (max-width:200px){
.element-class{display:block}
/* These definitions applies to screens with width 0px to 200px; */
}
#media screen and (min-width:201px){
.element-class{display:block}
/* These definitions applies to screens with width 201px or above; */
}
It's good to not depend of the javascript that may be unable in some clients browser, then CSS is very useful for your blogs/websites.
Know the CSS pseudo-classes too, but Javascript also is a good language to learn and sometime you may need it.