Good Afternoon Ladies & Gents,
Hope everyone is doing well and keeping safe.
New user of this forum and need some advice in better understanding, and on how to fix an issue which might be somewhat very basic for the expert users. Any help is appreciated.
What I’m trying to do:
I’m making a static login/signup/info/about page and converting it into responsive without any JQuery. Using bootstrap version as mentioned in the title of the page. I have made almost all of the said page(s) and now coding from scratch in bootstrap for all screen layouts. Simple nothing fancy.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.css"
integrity="sha512-f73UKwzP1Oia45eqHpHwzJtFLpvULbhVpEJfaWczo/ZCV5NWSnK4vLDnjTaMps28ocZ05RbI83k2RlQH92zy7A=="
crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style10.css">
<title>10th</title>
</head>
<body>
<div class="container mymaincontainer"> <!-- Main container wrapping all content inside. everything in this is center-->
<div class="container othercontainer">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row center-div">
<div class="col-sm-2 themed-grid-col mymainnavigation1">This is navigation pane</div>
<div class="col-sm-10 themed-grid-col mymainnavigation2 ">This is content pane</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ=="
crossorigin="anonymous"></script>
<script type='text/javascript' src="app4.js"></script>
</body>
</html>
My CSS:
body{
background-color: gainsboro;
}
.mymaincontainer{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid rgb(255, 0, 0);
}
.othercontainer{
border: 2px solid cyan;
}
.center-div{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 80%;
border-radius: 3px;
background-color:white;
}
.mymainnavigation1{
border: 2px solid blue;
}
.mymainnavigation2{
border: 2px solid yellow;
}
Issue:
On resizing the columns stacks up as they should. Navigation, where the menu links and font awesome icons will be goes on top. And second column where the main content will be goes under. Nicely stacked on top of the other. But, the screen or viewport is split 50 50 among the two columns. In navigation there are only, Login, Signup, Info and About. Four items (will be) hence the predicament. ideally on resizing the full screen to smaller size it should, or how I imagine in my mind is that it should be one row only. Meaning the top part which is navigation on resizing is only about lets say 40% or even 30% of the current split of 50 50. The remaining space should go to main content area because that’s where the forms and other info is.
As you can see a simple issue I have explained in a semi novel because I am not a developer or know how to use correct terms and not long out in explaining! For that I apologise.
I have link to bootstrap documentation and I have been reading it and getting more confused. As last resort asking the question so I can then move forward with adding other code in the above and see how it pans out?
Your help is appreciated. I also hope I’m posting in the right section of the forum.
Thank you for reading the wall of words.
Have a lovely weekend.
P.S. I have made a quick pic of what I’m trying to do which the said page and can post it if it is needed.