I recently just added a grid layout, but I can't figure out how to make my links work. The grid that I used is the 1140 one at http://cssgrid.net/. I studied the source code of that website, and tried to make my page like theirs, but when I put everything in it made mine worse, and the grid didn't even work. This is how my website is supposed to look http://spencedesign.netau.net/singaporehome.html
and this is how it does
http://spencedesign.netau.net/home.html
And when you reduce the size, it doesn't look like it's supposed to. When you minimize it I want the pictures(links) to be two per row, then one per row depending on how small the page is. I also want the quote to turn into different rows when it is too small for it. But I can't figure out how to make the page look normal regularly let alone make it look good with a smaller browser. Thanks!
http://goldengridsystem.com/ might have what you're looking for. Folding effect worked for me.
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
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.
So this is my first time trying to use a responsive framework...also fairly new to building responsive sites in general - but had a lot more luck with just building them from scratch and sizing each element...though Foundation seems like a much better solution if I could just get my head around it!
Work in progress is here: http://client.analog.la/360/
It's behaving 'alright' in my desktop browsers (resizing down to 400) except for a problem with the menu - the issue I'm having is trying to get the menu to drop down below the logo and be properly centered.
On actual mobile and tablet having way more issues...the menu is sitting above and the whole layout or to one side and not dropping down at all. On ipad the whole layout seems to be only about 95% page width with a random margin down the right hand side...on iPhone the whole layout only seems to be about 50% width...which just looks...awful. There's so much discrepancy between how the layout looks on devices vs. how it looks on desktop at the same resolution that I'm a bit baffled...Also, really not sure where I went wrong with the sizing to make it look so wrong on devices!
Any help would be massively appreciated!
Thanks,
Not sure if you're still looking for help on this, but there are a number of issues in your codebase, and it's hard to say which ones are causing the behavior you're trying to address. Your very first div uses the columns class, but it's not nested in a row. Elsewhere, you have rows immediately nested in other rows with no apparent benefit, more columns nested in other columns without an interposing row, and nested rows that aren't set to collapse. You're also using spacer.png in a few places, which almost reduced me to tears.
And your top level headers are in spans instead of h1. My only guess here is that you were attempting to sidestep Foundation's default styles? Use a class. You need those h1s for SEO, semantics, etc.
No insult intended, but you might do well to check out Treehouse and sharpen your coding skills - could save you a lot of time and frustration in future work.
I have got a requirement where the outlook is as shown in the attached image
I have accomplished the task by making use of tables in HTML and styling using CSS.
The criteria is that the images in a row is almost the same (i.e the two images) and the content changes for every row. So the content is different on every row but the images remain the same for every row. Just for info there will be multiple number of rows. What would be the best practice to implement such as design other than using tables, where it should also be flexible to change the content. Or using tables is the best option.
Suggestions from the professionals are appreciated.
I don't want to write it for you but I've made a quick mock up for you to have a look at - http://jsfiddle.net/spacebeers/TAJdw/
You don't want to use tables for anything other than tabular date anymore. You're much better off spending your time researching CSS.
Have a look at my example. It's what one instance of a content container could look like. What you want to do from there is look at getting two of them in a row. Build the CSS for the .container class, then copy another instance of .contentContainer in and see what results you get.
I'm happy to provide help if you want but it's always good to have a crack at it yourself. You'll get better answers on here and avoid unnecessary downvoting of your question.
It is generally advisable to use pure css for things like this, rather than tables. Tables cause your page to render slower, as the content needs to be loaded before the rendering engine can correctly draw them.
Try something like this
I would consider using a div with a background image style to it so that for each row with the same image all you will need to do is put that specific div class in. Then you can just position the outer div's to get it to look correctly, although tables are not the most efficient way of build web pages they still work.
Like mez said - you need to think about repeating content - and learning about floats. I'd really advise working through this site
http://css.maxdesign.com.au/floatutorial/
it will teach you all the basics of designing with divs.
In the meantime - here's roughly what your're after. I've added background colours and made up all the heights and widths, as they weren't specifie, but it should get you started.
If you look at the html, I've annotated what is just a repeat of earlier content.
http://jsfiddle.net/zandergrin/k8EsP/3/
I was having a chat with a designer about how to make my life easier to build site templates. They showed me a page layout overlaid with 24 columns and I can see that everything fits very nicely within the the 24 columns but I fail to see how this can help me build templates more efficiently and accurately.
My preference is for the designer to provide a page design overlaid with dimensions, much like architectural blueprints. This is how I've always done this, but I am open to faster and better methods.
Any opinions/ideas on this?
Steve
It lets you rough out designs in PS and write the initial layout code much faster, though it does have limitations/annoyances.
If you want a bordered box with padding (etc) within those columns you'll have to nest a tag inside a "grid_x" div, otherwise it'll send stuff off the grid.
give a try to fluid24.org maybe can give you some ideas