Hoe zorg ik ervoor dat mijn website er hetzelfde uit ziet op mijn telefoon?

[JeroenHulshof]

Hallo,

Ben ik weer!

Mijn vraag is dit keer:

Ik heb mijn website nu goed op mijn laptop van 13".
Als ik op mijn telefoon wil checken, staat de box waar ik text in ga doen tussen de header en de content in, + mijn footer staat niet helemaal onderaan de website.

CSS:

@charset "UTF-8";
/* CSS Document */

body{
    font-family:							verdana;
    margin:									0px auto;
    position:								relative;
    width:									100%;
    background-color:						rgb(172, 172, 172);
    background-repeat: 			         		repeat;
background-position:                 		center center;
background-attachment:                  	fixed;
}

#container{
width: 										100%;
height: 									100%;
margin: 									0px auto;
}

#header{
	width: 									102%;
height: 									116px;
margin-top: 								-21px;
margin-left: 								-10px;
background-image:							url('./../images/bgheader.png');
background-repeat: 			         		repeat;
background-position:                 		center center;
background-attachment:                  	fixed;
font-family:								verdana;
}

#logo{
	width: 100px;
height: 100px;
margin-left: 61px;
margin-top: 32px;
position: absolute;
}

#nav{
float: right;
margin-top: 61px;
margin-right: 1px;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

ul {
list-style-type: none;
height: 80px;
width: 344px;
margin: auto;
}

ul li a:hover{
    color: #CF2718;
}

ul a {
padding-right: 10px;
padding-left: 10px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Georgia, "Roboto", sans-serif;
font-size: 15px;
color: #FFF;
}

li {
float: left;
}

#content{
	width: 740px;
min-height: 223px;
background-color: #FFF;
margin-top: 10px;
margin-left: 50px;
box-shadow: 2px 2px rgb(201, 201, 201);
position: absolute;
}

#contentbanner{
width: 772px;
margin-left: -19px;
height: 41px;
background-image: url('./../images/sprite.png');
margin-top: 29px;
}

#contentinfo{
width: 515px;
height: 23px;
margin-top: -15px;
margin-left: -90px;
color: #FFFFFF;
text-align: center;
cursor: pointer;
line-height: 30px;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
font-family: 'Roboto',sans-serif;
}

#footer{
	width: 100%;
height: 21px;
background-color: #CF2718;
margin-top: 100%;
text-align: center;
color: #FFF;
}

voorbeeld url: http://www.jeroenhulshof.nl/test.

Hopelijk kunnen jullie mij helpen!

Met vriendelijke groeten,



Jeroen Hulshof.

 

[DJJochem]

Je pagina is te breed voor het scherm van een telefoon, afhankelijk van welke telefoon met welk OS je hebt, ziet het er weer anders uit. Bij een Android telefoon zal het er weer anders uit zien dan op een iPhone. Het beste is om een apart ontwerp te maken, dat wel lijkt op je originele ontwerp, maar dan andere maten heeft voor op een telefoon.

 

[JeroenHulshof]

ah oke! Hartelijk bedankt.
Nu zit ik alsnog met een probleem, ik heb 2 boxen. 1 met "over mij" en 1 met "social Media". als ik nu op mijn tv kijk naar mijn website, wijkt de social media box veel meer naar rechts ipv zoals het nu staat.

Hoe fix ik dit?

 

[DJJochem]

Ook dat kan aan je CSS liggen, waarschijnlijk heb je de Paginabreedte op een vaste waarde ingesteld.
Zorg dat je dat afhankelijk maakt van de breedte van het scherm van de gebruiker.

 

[JeroenHulshof]

Ik ga voor dit probleem een nieuwe topic maken.