I have an upcoming test in which I will be given a one-page design that I will be asked to re-create in one hour using HTML and CSS. The use of Bootstrap is also encouraged, and "bonus points" will be given for making the page responsive.
I am a little confused by the last part of this question, because I have read that Bootstrap is responsive in and of itself. If this is true, would I get "bonus points" for simply utilizing Bootstrap, or is there more to it than this (i.e. I still create my own responsive nav menu within my self-created CSS file / there is some way to edit or personalize Bootstrap's inherited responsiveness)?
Thank you!
Check out the introduction docs for Bootstrap:
https://getbootstrap.com/docs/4.2/getting-started/introduction/
It might be a bit much but when you spend a night experimenting and reading, you'll be able to do great things with it
Yeah the navbar is responsive on its own but if you want to be sure to get bonus points, you might want to change the behaviour of certain columns based on the screen size.
You can find more about that here
Related
I have created a website containing a mega menu. However, when I reduce the size of the page, the layout does not seem to be responsive and the elements seem to overflow.
I am unable to post the complete code, please assist. Below are the snippets of the code.
Full Size
After reducing size of page
I want to make the page responsive to any device. Where am I going wrong?
You should try the bootstraps column mechanism. I already find the part with tips for responsive design, but you should read it all. You just throughout the HTML classes define, how width you want the thing to be. Maybe, if you're able to put here a little bit from your code, it will be easier to help, but i know, that sometimes, it's just not posible. Anyway i hope, this will help
I have a web-app with the front end using materializecss.com framework. It has quite a few data tables throughout. My tables are using css from materialize and I really like the styling. The tables have between 5-8 columns and on mobile you first have to zoom in and then scroll over.
What I'm not sure about is what the best approach is to making this mobile friendly; I've been searching around for code that converts tables into cards and have found some for bootstrap cards but not for materialize. I don't want to hide columns.
I've tried my hand at a few solutions using media query's like: #media only screen and (max-width: 992px)... but I think materialize is overriding them because they are not working. I've tried to mark them !important or search through and modify the materialize css file but it is not working.
How bad would it be to create separate card elements and hide either the table or cards depending on screen size? It's mostly text data and links that are loading so I don't think it would significantly increase data transfer amount.
I'm not a pro at html/css/sass and even worse at javascript so any advice is greatly appreciated!
Adjusting your website in relation to the screen size is called responsive
Try looking for that in your research.
Using materialize gives you the option to the option to define a rowand within that you can make columns and define their size. You can even define the size relative to the screen size.
Try looking into this: https://materializecss.com/grid.html
Materialize also has its own (responsive) table and collection structure that might be helpfull to you.
Also it might be helpfull to use % in your css instead of fixed px
If you this doe not solve your case, try looking into flexbox and overflow.
I hope I understood your problem correctly otherwise some code of yours would be really helpfull :)
I am new at html and css and when I increase my browser size my entire layout gets messed up and elements start overlapping one another. Can anyone show me a way to make my layout become responsive? Thank you in advance!
It depends on what you wanna do.
1) If you're learning HTML5 and CSS than you've got to watch towards bootstrap media queries to code fully responsive. To go further you will also need Javascript. There are also paying technologies.
2) If you just wanna make a responsive website without caring about the coding side, you should choose a CMS like Wordpress, Joomla etc... It will be faster for you and with a good responsive template, a very decent solution.
There is a nice tutorial in w3schools that uses we3.css stylesheet framework, very easy to start and see the entire problem. It uses images of different size and adpat itself to pc, tablets, smarthpones. Try it, I mean read, it is a short one, and will help you a lot, can you implement without adding that file, but changing easily yours.
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
I've never done this before. The website I have just built is the second one I have ever built. There is a main container div and a header. I noticed that this simple html/css and js site looks terrible on mobile devices.
When it comes to making the site fluid are there any rules or approaches to make it quick and easy? If I just start changing all set pixel widths to percentages will the elements lose thir alignment in relation to each other? For example, the image in the main image slider is aligned, using pixels, based upon the position of the logo in the header.
Before I get started any pointers would be most appreciated. Here is the site: www.hauswoods.com
I would suggest you look into media queries instead, this will allow you to specify CSS related to different screen sizes. Yes, you could change your website to a liquid/fluid layout but with your current content, getting the slider and images to look right will be a headache.
A quick and easy approach would be to use a framework like Bootstrap (http://twitter.github.com/bootstrap/)
I'm sure some people would argue that you won't learn if you use that (because it will do a lot for you), but I think you can learn by example.
Bootstrap uses progressive enhancement principles to improve UIs and uses something called 'Less' for making CSS a bit more generic (at the expense of some complexity). Still, you can use whichever bits you like from it. If you've got a greenfield site it's a good place to start. It supports fluid layouts and explains to you how your design will degrade on mobile devices with smaller screens.
There are plenty of good tutorials out there:
http://green-beast.com/blog/?p=199
http://www.maxdesign.com.au/articles/liquid/
http://css-tricks.com/the-perfect-fluid-width-layout/
Below are IMHO some of the best JS-frameworks/html5-templaters that help with what you're trying to achieve. No need to re-invent the wheel.
Twitter Bootstrap
Foundation
CreateJS
Skeleton
HTML5 Boilerplate
HTML KickStart
Montage HTML5 Framework
SproutCore
Zebra
if you want your website to be fluid just use percentage instead of pixels.
.classname{
width: 80%;
}