08:34 pm - October 15,2018
Private chat

Make responsive and 2 column layout for homepage
yohans tesfaye on Jun 8/2016 6:36 am
yohans tesfaye
1 Jun 8/2016 6:36 am
Falling hurts alot but it make make stronger for next attempt.
In this topic i will show you how to make a responsive homepage like ethio-pic.
[img]http://ethio-pic.mywapblog.com/files/ethio-pic-web-version.png[/img]
Firstly you need to consider the following things to design your homepage.

- Number of columns : when we design your homepage in responsive way we need to divide by columns.

- Width of columns : width of each column depends on number of columns and maximum width of container[/b].

- Contents : contents that you should to add on your homepage is must be include [u]Links
,call to actions,forum/blog posts

- Color scheme : a color you use as background,text and link shouldn't be disturber

HOW TO MAKE 2-COLUMN HOMEPAGE
I am going to talk about ethio-pic homepage. It is a responsive. It is
- 2 columns
- container width 1024px
- columns have close to 2:1 ratio
- using Responsive Web Design
- No media query

CONTAINER
A container is over all body that holds together 2 columns and and it align based on width of the screen.
* all_cont is a class selector that we use for container.

COLUMNS
I have used 2 different size width columns. Because of the columns have a different size of width we need two class selectors
* remember the sum 2 columns width is not greater than the width of container.

- major is a first class selector that we use for first column. It is the larger in width.

- minor is a second class selector that use for second column. It is the small in width.

HTML CODE
Now we need to add the HTML CODE. I am using div HTML tag.
<div class="all_cont"> <div class="major">YOUR MAJOR CONTENTS HERE</div> <div class="minor">YOUR ANOTHER CONTENTS HERE</div> </div>


CSS CODE
After we add Html code we need css to apply responsiveness effect. As you know we have used three(3) class selectors. Add the CSS/STYLE on head or style sheet.
<style type="text/css"> .all_cont { max-width: 1024px; margin: 5px auto; }
.major { width: 710px; max-width: 98%!important; display: inline-block!important; margin: 0px; }
.minor { width: 285px; max-width: 98%!important; display: inline-block!important; margin: 0px; } </style>


SCREENSHOT
on 1280px screen
[img]http://mini.s-shot.ru/1280/987/jpeg/?ethio-pic.tk[/img]

POST CREDIT TO ETHIO-PIC.TK
THANK YOU
ethio-pic.tk
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report

akpobi on Jul 24/2016 1:02 pm
akpobi
2 Jul 24/2016 1:02 pm
side bar isn't responding
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report

yohans tesfaye on Jul 24/2016 1:38 pm
yohans tesfaye
3 Jul 24/2016 1:38 pm
Falling hurts alot but it make make stronger for next attempt.
[quote=akpobi]side bar isn't responding[/quote] what is your site?
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report

akpobi on Jul 25/2016 11:37 am
akpobi
4 Jul 25/2016 11:37 am
[quote=yohans tesfaye] what is your site?[/quote]
unionmobs.wapka.mobi
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report


Add Comment
bolditalicunderlineimageurlcodephp
Name:

Content:

: ..››..1
Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Real Time Analytics

Clicky