Dealing with a problem that my web-page is not scaled correctly in mobile browser windows, especially it ignores all the float:left properties, and I assume, one of the reason is the declaration of width/height the way I did. Any advice on fixing css the mobile-friendly way?
body {
height: 100%;
}
#header_chat {
height: 100%;
}
#header_logo_menu {
background-color: #fedc3d;
width: 700px;
height: 171px;
float:left;
border-top: 5px solid #01abaa;
border-left: 5px solid #01abaa;
}
#header_right_menu {
height: 171px;
overflow: auto;
background: #01abaa;
border-top: 5px solid #fedc3d;
border-right: 5px solid #fedc3d;
}
#chat_big {
height: 100%;
}
#chat_messages {
width: 700px;
float: left;
height: 570px;
overflow-x: hidden;
overflow-y: hidden;
}
#inner_messages {
width: 700px;
height: 570px;
font-size: 14px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
background: #fedc3d;
color: #000000;
border: 5px solid #01abaa;
word-wrap: break-word;
white-space: initial;
}
#user_list {
height: 560px;
overflow: hidden;
background: #01abaa;
border: 5px solid #fedc3d;
}
#chat_text {
float:left;
width:50%;
height:55px;
border: 5px solid #01abaa;
font-size: large;
resize: none;
}
#send_message_button {
width:20%;
height: 68.5px;
float: left;
font-size: 16px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
}
#send_message_button:hover {
border: 5px solid #01abaa;
background-color: #fedc3d;
padding: 16px 32px;
text-align: center;
text-decoration: none;
transition-duration: 0.1s;
cursor: pointer;
}
#profile_button {
width: 15%;
height: 68.5px;
float: left;
font-size: 16px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
}
#profile_button:hover {
border: 5px solid #01abaa;
background-color: #fedc3d;
padding: 16px 32px;
text-align: center;
text-decoration: none;
transition-duration: 0.1s;
cursor: pointer;
}
#log_out_button {
width:13.85%;
height: 68.5px;
font-size: 16px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
}
#log_out_button:hover {
border: 5px solid #01abaa;
background-color: #fedc3d;
padding: 16px 32px;
text-align: center;
text-decoration: none;
transition-duration: 0.1s;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<link href="../styles/style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content='width=device-width; initial-scale=1.0; maximum-scale=1.0'>
<title>Chat App Home</title>
</head>
<body>
<div id="header_chat">
<div id="header_logo_menu">
</div>
<div id="header_right_menu">
</div>
</div>
<div id="chat_big">
<div id="chat_messages">
<div id="inner_messages">
</div>
</div>
<div id = "user_list">
<div id="users_online">
</div>
</div>
<div>
<textarea id = "chat_text" name = "chat_text"></textarea>
<input type = "button" id = "send_message_button" value = "Send Message"/>
<input type = "button" id = "profile_button" value = "My Profile"/>
<input type = "button" id = "log_out_button" value = "Log Out"/>
</div>
</div>
</body>
</html>in general it's better to use percentage values combined with max-width values for mobile devices, i.e. in media queries, for example like this
.my_div {
width: 100%;
max-width: 480px;
}
This will fill the while width on screens up to 480px and stay at 480px width for screens above 480px width.
You can put rules of this kind into media queries (for example @media screen and (max-width: 768px)) and ADD them to your stylesheet. So on desktop you'll have the rules you have now, and on devices less than 769px wide these additional rules apply.
Your fixed pixel widths are definitely to wide for mobile devices.