Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post

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

    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

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Can you be more specific with your issue and possibly include some code?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    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

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •