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.
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
"Use images to break up the content."
What do it means? What can I use code for that? html or css would do. Thank you.
I think this advice is telling you that the content of your page is too condensed (everything is clustered together) - or - the page you're to build should not be one big block of stuff. It sounds like they want you to add images in between blocks of content to spread things out and give space around things - to make things "flow".
Without knowing what the project is it's hard to answer a question like this.
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.
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.