SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Responsive website - looking for some advice

    Hello I wanted to develop a responsive website earlier this year, but it never really took off. So here I am retrying...

    This website is the responsive website I would like to base my design. It is a common design but based on my research it gets quite complicated...
    Currently this website is responsive and when it gets to certain px value the main front page does not gets displayed. Also when you scroll down there is a constantly refreshing section of articles coming from 3 different news sites.

    The website I am developing does not have to be that complicated (yet...)
    Based on my research there are number of ways to develop this kind of website...
    Here is an image for a better reference:
    VoxMedia.jpg

    So how would I tackle this problem?

  2. #2
    SitePoint Zealot WebEminence's Avatar
    Join Date
    Jan 2012
    Location
    Chicago, IL
    Posts
    130
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you need to research building a responsive site if you plan on building this site from scratch. I have edited responsive sites so all I know is you can use media queries to change the CSS formatting at different pixel widths.

    You may want to find a theme that matches your needs and already has built-in responsiveness.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes by studying the code, looks like all media queries (
    Code:
    @media
    ) use < or > signs to manipulate the designs...

    The side I am studying is a complicated site but step by step I think I can get through this...
    Thank you for the advice. Much appreciated.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Start to play around with @media and have some fun with it. Make sure to place something like this in the head of your document, though:

    Code:
    <meta name="viewport" content="width=device-width">

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I would highly suggest to download skeleton css, and start from there. Creating from scratch is a lot of work but the rewards are amazing! Start from that, and move on using different layouts, difficult one and sharpen your skills.

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My suggestion is similar to shadir41's, except I suggest using Twitter Bootstrap. It is all HTML and CSS. All the responsive stuff is there already for you to use.

    I am not a trained website builder, but I quickly learned how to use Bootstrap and built two ecommerce stores with it. You can see one at easydigging.com

    It'll will save you lots of work and headache.

  7. #7
    SitePoint Member vinlin's Avatar
    Join Date
    Sep 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to work on a media screens in css
    .footer
    {
    clear:both;
    float:left;
    color:#CCC;
    background:#333;
    width:100%;
    height:30px;
    line-height:30px;
    text-align:center;
    }


    @media screen and (max-width:720)
    {
    .logo
    {
    border:0px solid;
    width:100%;
    float:none;
    font-style:italic;
    padding-left:20px;
    text-align:center;

    }
    .navi
    {
    width:100%;
    height:210px;
    float:left;
    background-color:#09F;
    clear:both;
    margin-top:30px;
    }

  8. #8


Tags for this Thread

Bookmarks

Posting Permissions

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