I would like to create a responsive page that
and
but I can't figure out what is wrong with my code that results in media queries not working.
Also, the searchbox in the left side bar is overflowing its parent even if I add "box-sizing: border" box to it.
The last question is that I would like to make the vertical side borders of the boxes to be the same height as the page height, without creating a side scroll bar (I tried making the boxed height: 100%, which was serviceable but it also created a side scrollbar, which is not allowed in this assignment).
Please have a look at my code below, thanks much:
@media screen and (max-width: 1400px;) {
.groupsettings,
.search {
width: 300px;
}
}
@media screen and (max-width: 1000px;) {
.groupsettings {
display: none;
}
}
@media screen and (max-width: 600px;) {
.search {
display: none;
}
}
.avatar {
border-radius: 50%;
height: 25px;
margin-left: 0;
margin-right: 10px;
width: 25px;
}
.chatroom {
border-right: 1px solid lightgray;
grid-column: 2/3;
grid-row: 2/3;
}
.groupprofile {
border-bottom: 1px solid lightgray;
padding: 10px;
}
.groupsettings {
grid-column: 3/4;
grid-row: 2/3;
min-width: 300px;
}
.grouptitle {
grid-column: 2/4;
grid-row: 1/2;
}
.his {
background-color: lightgray;
}
.his,
.mine {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
font-size: 14px;
width: max-content;
padding: 5px 10px 7px;
}
.loading {
color: lightgray;
font-size: 14px;
text-align: center;
}
.logo {
border-radius: 50%;
height: 40px;
vertical-align: middle;
width: 40px;
}
.messenger {
border-top: 1px solid lightgray;
display: grid;
grid-template-columns: 3fr 4fr 3fr;
grid-template-rows: auto 1fr;
}
.mine {
align-self: right;
background-color: #0097f7;
color: white;
margin-left: auto;
margin-right: 10px;
}
.name {
color: lightgray;
font-size: 12px;
margin: 0;
text-indent: 10%;
}
.normal {
font-size: 14px;
margin-left: 5px;
}
.options {
color: gray;
font-size: 14px;
margin-left: 10px;
margin-top: 10px;
}
.search {
border-right: 1px solid lightgray;
grid-column: 1/2;
grid-row: 1/3;
min-width: 300px;
}
.searchbox {
background-color: lightgray;
border: none;
border-radius: 2px;
box-sizing: border-box;
color: gray;
font-size: 12px;
margin: 10px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
width: 100%;
}
.searchbox:focus {
border: none;
padding-left: 10px;
text-align: left;
}
.settings {
padding: 0px;
}
.steve {
display: flex;
align-items: center;
margin-left: 10px;
}
body {
font-family: "SFUIText-Regular", "Segoe UI", "Helvetica Neue", Helvetica,
Arial, sans-serif;
margin: 5px 0 0;
}
strong {
border-bottom: 1px solid lightgray;
display: block;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}<html>
<head>
<title>Messenger</title>
</head>
<body>
<div class="messenger">
<div class="search">
<strong>Messenger</strong>
<input class="searchbox" placeholder="Search Messenger" />
</div>
<div class="grouptitle"><strong>normal group chat</strong></div>
<div class="chatroom">
<p class="mine">Hey man, hope everything's okay!</p>
<p class="name">Steve</p>
<div class="steve">
<img
class="avatar"
alt="mine-craft-chara"
src="https://i.imgur.com/R10B80x.png"
/><span class="his"
>All good man, those stacks of diamonds coming in hot!</span
>
</div>
<p class="mine">Nice - make sure to save me some haha :D</p>
</div>
<div class="groupsettings">
<div class="groupprofile">
<img
class="logo"
alt="mine-craft-logo"
src="https://i.imgur.com/vWJzAsu.jpg"
/>
<span class="normal">normal group chat</span>
</div>
<div class="settings">
<p class="options">Options</p>
<p class="loading">Loading...</p>
</div>
</div>
</div>
</body>
</html>Remove the semi colons after the max-width.
@media screen and (max-width: 1400px) {
.groupsettings,
.search {
width: 300px;
}
}
@media screen and (max-width: 1000px) {
.groupsettings {
display: none;
}
}
@media screen and (max-width: 600px) {
.search {
display: none;
}
}
.avatar {
border-radius: 50%;
height: 25px;
margin-left: 0;
margin-right: 10px;
width: 25px;
}
.chatroom {
border-right: 1px solid lightgray;
grid-column: 2/3;
grid-row: 2/3;
}
.groupprofile {
border-bottom: 1px solid lightgray;
padding: 10px;
}
.groupsettings {
grid-column: 3/4;
grid-row: 2/3;
min-width: 300px;
}
.grouptitle {
grid-column: 2/4;
grid-row: 1/2;
}
.his {
background-color: lightgray;
}
.his,
.mine {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
font-size: 14px;
width: max-content;
padding: 5px 10px 7px;
}
.loading {
color: lightgray;
font-size: 14px;
text-align: center;
}
.logo {
border-radius: 50%;
height: 40px;
vertical-align: middle;
width: 40px;
}
.messenger {
border-top: 1px solid lightgray;
display: grid;
grid-template-columns: 3fr 4fr 3fr;
grid-template-rows: auto 1fr;
}
.mine {
align-self: right;
background-color: #0097f7;
color: white;
margin-left: auto;
margin-right: 10px;
}
.name {
color: lightgray;
font-size: 12px;
margin: 0;
text-indent: 10%;
}
.normal {
font-size: 14px;
margin-left: 5px;
}
.options {
color: gray;
font-size: 14px;
margin-left: 10px;
margin-top: 10px;
}
.search {
border-right: 1px solid lightgray;
grid-column: 1/2;
grid-row: 1/3;
min-width: 300px;
}
.searchbox-container {
padding: 10px;
box-sizing: border-box;
width: 100%;
}
.searchbox {
background-color: lightgray;
border: none;
border-radius: 2px;
box-sizing: border-box;
color: gray;
font-size: 12px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
width: 100%;
}
.searchbox:focus {
border: none;
padding-left: 10px;
text-align: left;
}
.settings {
padding: 0px;
}
.steve {
display: flex;
align-items: center;
margin-left: 10px;
}
body {
font-family: "SFUIText-Regular", "Segoe UI", "Helvetica Neue", Helvetica,
Arial, sans-serif;
margin: 5px 0 0;
}
strong {
border-bottom: 1px solid lightgray;
display: block;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}<html>
<head>
<title>Messenger</title>
</head>
<body>
<div class="messenger">
<div class="search">
<strong>Messenger</strong>
<div class='searchbox-container'>
<input class="searchbox" placeholder="Search Messenger" />
</div>
</div>
<div class="grouptitle"><strong>normal group chat</strong></div>
<div class="chatroom">
<p class="mine">Hey man, hope everything's okay!</p>
<p class="name">Steve</p>
<div class="steve">
<img
class="avatar"
alt="mine-craft-chara"
src="https://i.imgur.com/R10B80x.png"
/><span class="his"
>All good man, those stacks of diamonds coming in hot!</span
>
</div>
<p class="mine">Nice - make sure to save me some haha :D</p>
</div>
<div class="groupsettings">
<div class="groupprofile">
<img
class="logo"
alt="mine-craft-logo"
src="https://i.imgur.com/vWJzAsu.jpg"
/>
<span class="normal">normal group chat</span>
</div>
<div class="settings">
<p class="options">Options</p>
<p class="loading">Loading...</p>
</div>
</div>
</div>
</body>
</html>