Can someone help me with converting to 1140px css grid??

[charlyanderson]

I have almost finished my website but wish I had have made it responsive from the start. My testing site link is here

Would someone be able to perhaps give me an example of how to change my code. I am very new to this so please bear with me and no snipes please.

Thanks in advance

[L0adOpt1c]

Can you be more specific with your issue and possibly include some code?

[Excavator]

Hello charlyanderson,
You don't need to include any code, we can get it all from the link.

I'm not sure what you want to do though, a better explanation might help.

The first thing I noticed was #wrapper doesn't scroll up far enough to see the contact information at the bottom. Add these bits highlighted in red and see how that works for you -

#wrapper {
    background-repeat: repeat;
    border: thin none #000000;
    margin: 0 auto 50px;
    min-height: 800px;
    width: 1024px;
    overflow: auto;
}

See here to learn how overflow: auto; clears your floats.

[charlyanderson]

Hi Excavator,

Thanks for the code tip, I will amend

Basically I am happy with my website, my only issue is that it's not responsive and looks a bit large in some resolutions. Someone told me I could use the 1140px css grid to make it responsive but I cannot get it to work.

Since posting on here I have started to design another website (unrelated to my own) and trialling the grid and it seems to be working well so far. However I cannot seem to get it to function with the website I mentioned earlier in this post and could use some tips.

The other website I making sits in the centre of the browser, and when you resize the browser it functions correctly and the content and font resizes. However when I apply the same technique to the website I have been talking about, it sits off centre and does not act in the same way.

Any ideas??

The website is still currently non-responsive, I would appreciate any feedback on how my website sits in your browsers

[webdevs]

For the responsive website design you should have great expertise to develop xhml/css in %. Create all the div in %. Use image in 100% width. Font size should be in EM.

[felgall]

Any web page sizes defines in px will NOT be responsive. The only places where px should be used are for minimum width borders (1px) and images (where the sizes are that of the actual image in pixels). Use em and % to define everything else to make it responsive.

[charlyanderson]

Ok I will try re-doing it as you said. I think the biggest problem was that the wrapper went crazy despite taking the values out (widths etc) but perhaps I was just missing something. Thanks for your help so far