what is the easiest way to create responsive designs ??
i have tried using media queries and certain things don't work then i looked into the view port method and that looks better i would just like some advice really
Printable View
what is the easiest way to create responsive designs ??
i have tried using media queries and certain things don't work then i looked into the view port method and that looks better i would just like some advice really
Personally I've always used media queries and they've worked just fine. Not sure exactly what you mean by "the viewport method". If you're running into issues, I'd suggest you giving some specifics on what you're trying and what is going wrong, preferably with links to the page you're testing.
the main problems i am having with media queries is the objects moving when it scales down like images and some divs they move across to the right for example
i have a logo within the top left corner and when it scales down it moves to the right hand side instead of being still and also just the way it looks without having to use so much code. this is the second problem really i created this site and i had to have 4 css style sheets for the website one for each scale size and then i see other peoples and they have 5 - 8 lines of code for each size and it changes as much as mine does.
i am new to this so i understand i need to learn to use it properly but i got no one to show me or tell me what to do because i dont know any body that knows the site i created is www.designjazz.co.uk only the co.uk version . com is a different site
Well there's a lot here, but I can give you a couple of tips.
First, avoid repeating yourself in the CSS. For example, in your web.css sheet you tell the font to be Trebuchet MS 8 times. Define your main font once on the body tag, and then only define it again on elements that should have a different font. The same goes for the rest of your CSS, try to define things only once. You should only add things that are different.
Second, it's good practice to start with a core stylesheet that applies to everything. You might think that's your web.css, but that only goes up to 1336px. On my large widescreen monitor (1920px) your site has no styles at all. When writing your core.css it's a good idea to start with the styles for the smallest mobile view. Then in your other media queries, add the styles for the larger sizes. Once again, don't repeat yourself. Only add styles that should be different for tablet or desktop.