I can't make my website fluid for a responsive layout?

can you link some code?

Hi, sorry, it is not within a course, I am trying out what I have learnt in a separate css file which I am not sure if I am allowed to paste here? Basically, I am giving a wrapper div several max-widths in pixels and have given each div after that a percentage calculated on their size and the browser size. e.g. .div { max-width:24.777%; }

I have also tried it with 100% which seemed to stop the margin: 0 auto; work completely.

I have still got:

img { max-width:100%; } as in the 'How to Build a Website' tutorial, this is one the things he recommended for a responsive layout.

its hard to answer without code,i can tell you to check few things

1.you can try add max-width:100% !important; ** this will override potencial previouse max-width propertys

2.you mybe wanna set height:auto;

3.check did u include all style files corectly ,save last changes

4.check did u target your img corectly exp.

.wrapper img {

max-width:100% !important

height:auto;

}

sry its hard to be more specific

You should be able to cut and paste your code here. Remember to use the Markdown technique for ease of viewing. If you don't know what that means see "Markdown Cheatsheet" below any of the input text boxes here on this page, and also watch the video off to the right "Tips for asking questions"

my question would be I would want to see your code around media queries.

Thank you for responses. In the 'How to Build a Website Video' Nick got the site to be fluid before using media queries and without the !important rule. All I want is to be fluid at the moment so I can add media queries to make it fully responsive. Below are some code snippets. I hope this helps to clarify what I am doing wrong, thank you!

.wrapper { overflow:hidden; max-width:467px; }

header { margin: 0 auto;

}

.logotext { max-width:51.820%; padding:3% 0; margin: 2% auto; }

.logolion { max-width:39.904%; float:left; margin:2% 0; }

.info { max-width:37.473% float:right; margin:5% 0 2%; }

h1 { max-width:65%; font-size:0.8em; text-align:left; float:left; margin:6% 0 0 -65px; padding:0

}

section { max-width:80%; margin:0 auto; }

img { max-width:100%; }

(I have given the .wrapper a max-width of 467px as I could not centre the margins with it in a percentage, or at desktop width when at mobile width. I suspect this is where I have gone wrong somehow. I have also tried the individual divs at max-width:100% but then they wouldn't position at all in the browser.

you are doing to much max-width u dont need force that on every single element !

and u need set display:block on items which u wanna center with margin:0 auto;

Hi, thanks. I didn't put display:block as I understood that block level elements such as divs did not need it? Also, I have tried without the max-widths and the elements just stay fixed in the left hand corner.