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
Related
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
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.
Ok,
So I want to create a website that has full-height and width images with the content on them, and then when you scroll, it scrolls down to the next full-height and width image / part of the site. Put in short, I want each different piece of content on the website to have it's own individual screen, but I want them all on the same page.
I don't have any code to show as I have not yet started, and I have absolutely no clue how it would be done.
Any help that you can give is appreciated.
Thank you
I think FullPage.js is what you need. It's a library that helps you get the job done in a more convenient way. For help just take a look at the documentation.
There are also other libraries that can help you do the same task, also you can do it by creating your own css style, but I think it is much more convenient to use libraries. :D
EDIT:
This is the exact example that you want to make.
I need a full-width image with labeled sections to link to individual pages. Any suggestions how to make this happen? The web site is built on WordPress, so if a plug-in will accomplish this that will work too. Method needs to be responsive and not break apart as viewport is reduced.
For example, Section 1 needs to link to the Section 1 page, etc.
See image at
Well, if you want to have something like that and responsive, you should cut the image in as many pieces as items you need, create an element for each piece and set the image as background. There rest is mediaqueries, maybe you can do it with bootstrap.
Also, try to go to the design community, as this is more related to design than anything else, and I don't think a Wordpress plugin exists for this.
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.