HTML/CSS How do I make the display responsive for smaller screens by stacking this as a column?

Question

I was experimenting with building a basic chat room system with HTML and I ran into some issues when attempting to implement responsive design for small-screen platforms. I've tried and tried for hours with all sorts of different solutions but am unfortunately still stuck. :(

I should just say, I'm an extremely inexperienced programmer in this area I should warn you the code is messy.

I've attached an image of the basic display on the wide screen of my PC.

Images: Small-screen attempt at display and Basic large-screen attempt at display

I have also attached an image of what happens when I try to shrink it - namely, half of it goes off screen and the other half is only accessible through scrolling.

Here's the code:

<!DOCTYPE html>
<html>
<head>
<title>
Grav1ty: Login
</title>
<link rel="stylesheet" href="gravitystyle.css">

<meta charset="UTF-8">
<meta name="description" content="Grav1ty Chat">
<meta name="keywords" content="Grav1ty, grud, soyuznerushimy, grav1ty">
<meta name="author" content="Grud">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="gravitylogo.PNG" />




</head>
<body style="background-image:url('background.jpg');font-family:Courier New;">
<div class="exampleheader">
<img src="gravitylogo.PNG" alt="Grav1ty Logo">
<p style ="color:white;"><font size="7">Grav1ty</font><p>
</div>

<!--<div class="examplerow">-->
    <div class="exampleheadera" class="container" style="padding: 10px; border: none;">
        <!--<div class="loginlayout">-->
        <div>
        <p style="color:#66c3fe;">
        <fieldset class="fieldseta" style="color:#66c3fe; padding: 10px; height: 350px; width: 300px;">
        <legend><b><h3>Welcome!</h3></b></legend>
        Welcome to <b>Grav1ty</b>,<br>Grav1ty is a <b>FREE</b>, online messaging service free from interruption or surveillance that will be developed over the next few months to suit your needs. Any queries? Contact me through Grav1ty! My username's Grud (well duh) and I'll be happy to help you out. Feel free to chat as you see fit...<br><br><i>Grud</i><br><br><b>Current Status: ONLINE</b>
        </fieldset>
        </div>
        <div>
        <form style ="color:white;" action="login.php">
            <fieldset class="fieldsetb" style="color:#66c3fe; height: 325px; padding: 30px;">
                <legend><b><h3>Log in:</h3></b></legend>
                Username:
                <input type="text" name="username" placeholder="Username" required><br>
                <br>Password:
                <input type="password" name="password" placeholder="Password" required>
                <br>
                <br>
                <input type="submit" value="SUBMIT" class="buttona">
                </form>

            </fieldset>
        </form>
        </div>
        <div>
        <form style ="color:white;">
            <fieldset class="fieldsetc" style="color:#66c3fe; height: 325px; padding: 30px;">
                <legend><b><h3>Sign Up:</h3></b></legend>
                Name:
                <input type="text" name="newname" placeholder="Name" required><br>
                <br>Username:
                <input type="text" name="newusername" placeholder="Username" required><br>
                <br>Password:
                <input type="password" name="newpassword" placeholder="Password" required>
                <br>
                <br>
                <input type="submit" value="SUBMIT" class="buttona">
                </form>
                </p>
            </fieldset>
        </form>
        <!--</div>-->   
        </div>
    </div>
<!--</div>-->

</body>


</html>

And here's the CSS stylesheet:

.buttona {
    background-color: #657EEB;
    border: 2px solid #1C43EF;
    border-radius: 6px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.buttona:hover {
    color: blue;
    background-color: white
}

.exampleheader {
    padding: 10px;
    text-align: center;
    background: #9b9ce7;
    color:  #11f2f2;
    border-radius: 2px;
    display: flex;
}
.exampleheadera {
    padding: 10px;
    text-align: center;
    background: white;
    color:  #11f2f2;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.examplenavbar {
    display: flex;
    background-color: #333;
    justify-content: space-around;
}

.examplenavbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

.examplenavbar a:hover {
    background-color: #ddd;
    color: black;
}

.examplerow {  
    display: flex;
    flex-wrap: wrap;

}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.exampleside {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;

}

/* Main column */
.examplemain {
    flex: 70%;
    background-color: white;
    padding: 20px;
}

/* Fake image, just for this example */
.examplefakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;

}

/* Footer */
.examplefooter {
    padding: 20px;
    text-align: center;
    background: #ddd;

}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */

.fieldseta {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px solid #b4fef5 ;
    background-color: white;
    height: 550px
}
.fieldsetb {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px solid #b4fef5 ;
    background-color: white;
    height: 550px
}
.fieldsetc {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px solid #b4fef5 ;
    background-color: white;
    height: 550px
}
.loginlayout {
  display: flex;
  justify-content: space-between;
  border: 3px solid #b4fef5;
  padding: 30px;

}

Answer 1

Something like this?

https://codebrace.com/editor/b1d87528b

Here in the example, I have added following property

display: inline-block;
vertical-align: top;

to each and every child div ( .contsidebyside ) inside .exampleheadera .

and removed

display: flex;

from .exampleheadera

Hope this Helps! :)

HTML/CSS How do I make the display responsive for smaller screens by stacking this as a column?

Question

1 answers

solution1
0 2018-08-30 20:06:43

HTML/CSS How do I make the display responsive for smaller screens by stacking this as a column?

Question

1 answers

solution1 0 2018-08-30 20:06:43

solution1
0 2018-08-30 20:06:43