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:

So how would I tackle this problem?

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.

Yes by studying the code, looks like all media queries (

@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.

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:

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

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.

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.

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;
}

Current Discussion http://www.sitepoint.com/forums/showthread.php?1185608-jQuery-for-Fullscreen-website-design