{"id":1962,"date":"2013-12-08T16:41:00","date_gmt":"2013-12-08T12:41:00","guid":{"rendered":"http:\/\/nayarweb.com\/blog\/?p=1962"},"modified":"2013-12-09T22:39:21","modified_gmt":"2013-12-09T18:39:21","slug":"making-a-responsive-blog","status":"publish","type":"post","link":"https:\/\/nayarweb.com\/blog\/2013\/making-a-responsive-blog\/","title":{"rendered":"Making a “Responsive” Blog"},"content":{"rendered":"

It turned out to be a quick and fairly easy job considering the fact that it’s the first time I’m paying with @media screen stuffs.<\/p>\n

Changing the main divs’ “width” to “max-width” did magic. The blog was like 75% responsive already. <\/p>\n

- width: 1000px;
\n+ max-width: 1000px;<\/code><\/p>\n

Then comes the most tedious part: fine tuning the interface.<\/p>\n

\"response3\"<\/center><\/p>\n

After wards, trimming margins, paddings was necessary to maximise the precious pixels on mobile devices. <\/p>\n

@media screen and (max-width: 430px){
\n #container {
\n\u00a0\u00a0 padding: 3px:
\n }<\/p>\n

.article {
\n\u00a0\u00a0 margin: 0px;
\n }
\n}<\/code><\/p>\n

\"response2\"<\/a><\/center><\/p>\n

I still need to work on the side boxes. Still undecided what info would mobile uses want to see. I guess time posted should go above the article and the tags\/categories below. It might be a challenge to do this one.<\/p>\n","protected":false},"excerpt":{"rendered":"

It turned out to be a quick and fairly easy job considering the fact that it’s the first time I’m paying with @media screen stuffs. Changing the main divs’ “width” to “max-width” did magic. The blog was like 75% responsive already. – width: 1000px; + max-width: 1000px; Then comes the most tedious part: fine tuning … Continue reading Making a “Responsive” Blog<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[176,175],"class_list":["post-1962","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-html5","tag-web-design"],"_links":{"self":[{"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/posts\/1962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/comments?post=1962"}],"version-history":[{"count":11,"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/posts\/1962\/revisions"}],"predecessor-version":[{"id":1978,"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/posts\/1962\/revisions\/1978"}],"wp:attachment":[{"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/media?parent=1962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/categories?post=1962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nayarweb.com\/blog\/wp-json\/wp\/v2\/tags?post=1962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}