I am struggling to create a responsive page that has specific layout specifications based on screen width. My goal is to:
- Hide the right chat info box when the page is under 1000px wide
Additionally, I want to:
- Hide both the right chat box and left sidebar when the page is under 600px;
Despite my efforts, I can't seem to get the media queries to work properly in my code.
Another issue I'm facing is with the searchbox in the left sidebar overflowing its parent container even after applying "box-sizing: border" CSS property.
Lastly, I'm looking for a way to make the vertical side borders of the boxes extend to the full height of the page without creating a side scroll bar, which is not allowed in this project.
Please take a look at my code snippet below and provide any insights you may have, thank you:
@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;
}</coade></pre>
<pre><code><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>