Jump to content
  • 0

Making website compatible to any resolutions .


RedRumPie

Question


  • Group:  Members
  • Topic Count:  14
  • Topics Per Day:  0.00
  • Content Count:  76
  • Reputation:   1
  • Joined:  01/21/14
  • Last Seen:  

Hey guys , any one know how to make an html page compatible to all resolutions ? 

I tried adding :

<style type='text/css'>
    body {width:100%;}
</style>

to my <head> </head> but it does not work..

Heres the page I'm talking about : http://icebergro.net/test/


T.I.A
Link to comment
Share on other sites

9 answers to this question

Recommended Posts


  • Group:  Members
  • Topic Count:  14
  • Topics Per Day:  0.00
  • Content Count:  76
  • Reputation:   1
  • Joined:  01/21/14
  • Last Seen:  

thanks for answering :D

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  94
  • Topics Per Day:  0.02
  • Content Count:  2192
  • Reputation:   252
  • Joined:  11/11/11
  • Last Seen:  

For me, that page is fine. Now your CP is the problem for me http://icebergro.net/cp/?module=news&action=view as I have a 13inch laptop with full width browser and the right side of your cp is cut for me (I have to scroll to the right to see more).

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  14
  • Topics Per Day:  0.00
  • Content Count:  76
  • Reputation:   1
  • Joined:  01/21/14
  • Last Seen:  

so yeah , how do I fix this ? XD 

Edited by iMrFreeziNg
Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  10
  • Topics Per Day:  0.00
  • Content Count:  78
  • Reputation:   2
  • Joined:  08/02/12
  • Last Seen:  

body{

width: 100%;

height: 100%;

margin: 0;

}

.controller{

width: 1400px;

margin-left: auto;

margin-right: auto;

margin-top: 0;

}

.container{

width: 1024px;

margin-right: auto;

margin-left: auto;

}

controller is the default screensize , container is the content, you may adjust controller to any you want or 100% for auto resizing depends on the users screen resolution.

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  25
  • Topics Per Day:  0.01
  • Content Count:  107
  • Reputation:   6
  • Joined:  12/09/11
  • Last Seen:  

the easy way is to use twitter bootstrap is a responsive framework

 

http://getbootstrap.com/

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  14
  • Topics Per Day:  0.00
  • Content Count:  76
  • Reputation:   1
  • Joined:  01/21/14
  • Last Seen:  

so where do I put this : 

 

body{
width: 100%;
height: 100%;
margin: 0;
}
.controller{
width: 1400px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
.container{
width: 1024px;
margin-right: auto;
margin-left: auto;
}

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  14
  • Topics Per Day:  0.00
  • Content Count:  76
  • Reputation:   1
  • Joined:  01/21/14
  • Last Seen:  

up

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  10
  • Topics Per Day:  0.00
  • Content Count:  78
  • Reputation:   2
  • Joined:  08/02/12
  • Last Seen:  

that code is for css, you must know how that code will be insert on header.php of fluxcp

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  29
  • Topics Per Day:  0.01
  • Content Count:  566
  • Reputation:   34
  • Joined:  11/17/11
  • Last Seen:  

Get a little vertical pixel of your background and make it repeatable on your CSS. So that all of your background sides will be filled.

Link to comment
Share on other sites

×
×
  • Create New...