So I'm still new to web developing and currently working on a restaurant site but when I view the page on smaller screens it's not displaying properly (not show full width) and the navbar is completely gone. How can I get this to properly show on smaller screens and the navbar to either become a togglebar or display under the logo? I think my current CSS setting might be to blame. Thanks
I have tried optimising with CSS and see if it can show the full page on smaller screens and have been able to achieve that for iPad Air and bigger screens but still no luck on smaller ones.
Happy to share my code if needed
HTML
<body>
<p >*Catering services available for hire</p>
<header>
<img src="/FBS LOGO.png">
<nav >
<div > <a href="#menu">Menu</a> </div>
<div ><a href="#order">Order</a></div>
<div ><a href="#location">Location</a> </div>
<div ><a href="#contact">Contact</a></div>
</nav>
</header>
<section id="about">
<div >
<div >
<img src="FBS_ISLAND GIRL_.png" alt="">
</div>
<div >
<h3>
<span > "Authentic </span> <span > <br> Caribbean </span> <span ><br> Cuisine" </span>
<span ><br> jus lik momma use tah mek it </span>
</h3>
</div>
</div>
<p > Like, Follow `n Share <br> <a href="https://www.instagram.com/food_by_sophie/" target="_blank"> <i > </i> FOOD_BY_SOPHIE </i> </a> </p>
</section>
<section id="order">
<h3 >
Order Now
</h3>
<h1 >
Collection Only
</h1>
<form action="https://formsubmit.co/a5f5a32519da94e6ed9ceef9fd5cf8af" method="POST">
<!- Honeypot -->
<input type="text" name="_honey" style="display: none;">
<!- Disaple Captcha -->
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://sprightly-meerkat-b47b9e.netlify.app/">
<div >
<div >
<span>
Your name
</span>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div >
<span>
Your number
</span>
<input type="number" name="number" placeholder="Enter your number">
</div>
</div>
<div >
<div >
<span>
Your order
</span>
<input type="text" name="order" placeholder="Enter your order">
</div>
<div >
<span>
Additional orders
</span>
<input type="text" name="extras" placeholder="Extras">
</div>
</div>
<div >
<div >
<span>
How much
</span>
<input type="number" name="amount" placeholder="How many orders">
</div>
<div >
<span>
Collection date & time
</span>
<input type="datetime-local" name="time">
</div>
</div>
<div >
<div >
<span>
Your message
</span>
<textarea name="message" placeholder="Enter your message" id="" cols="30" rows="10"></textarea>
</div>
</div>
<input type="submit" value="Order now" >
</form>
</section>
CSS
@import url('https://fonts.googleapis.com/css2?family=Libre Bodoni:ital@1&family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
--green:#27ae60;
--black:#192a56;
--light-color:#666;
--box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
text-transform: capitalize;
transition: all .2s linear;
}
html {
font-size: 62%;
scroll-padding-top: 5.5rem;
scroll-behavior: smooth;
}
.loader-container {
position:fixed;
top: 0; left: 0;
height: 100%;
width: 100%;
z-index: 10000;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loader-container img{
width: 35rem;
}
.loader-container.fade-out{
top: 110%;
opacity: 0;
}
header {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #a8b98a;
display: flex;
align-items: center;
justify-content: center;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: white;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
header .navbar a{
font-size: 40px;
border-radius: .5rem;
padding: .5rem 1.5rem;
color: white;
text-decoration: none;
font-family: 'Hi Melody', cursive;
}
.navbar a:hover {
font-size:88px;
font-size-adjust: 20px;
}
img.shop-logo {
width: 650px;
border-radius: 50%;
margin-bottom: -0px;
border: 10px;
margin-top: 0;
}
body {
background: #a8b98a;
}
.about .row{
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.about {
background: #fbe7d7;
padding-right: 10px;
padding: 20rem 9% 40rem 0rem;
}
.about .row .image {
flex: 1 1 45rem;
position: absolute;
display: block;
}
.about .row .image img{
max-width: 1250px;
max-height: inherit;
height: inherit;
width: inherit;
padding-top: 100px;
}
.about .row .content {
flex: 1 1 45rem;
}
.about h3{
text-align: end;
}
.about .row .content p{
color: #aa401b;
font-size: 45px;
text-align: center;
font-family: 'Hi Melody', cursive;
font-weight: bolder;
}
.line-1 {
margin-right: 80px;
padding-left: 0px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 0;
}
.line-2 {
margin-left: 5px;
padding-left: 150px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;font-family: 'Hi Melody', cursive;
font-size: 100px;
line-height: 1;
}
.line-3 {
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 1;
}
.line-4{
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 40px;
line-height: 1;
}
.share {
color: #d45a28;
font-weight: bolder;
font-size: 20px;
float:right;
padding-top: 80px;
text-decoration: none;
font-family: 'Hi Melody', cursive;
padding-top: 250px;
}
.share a {
color: #d45a28;
text-decoration: none;
font-weight: bolder;
}
.sub-heading {
color: black;
text-align: center;
margin-top: 30px;
padding-top: 20px;
}
.heading {
color: black;
text-align: center;
}
.order form {
max-width: 90rem;
border-radius: .5rem;
box-shadow: var(--box-shadow);
border: .1rem solid rgba(0,0,0,.2);
background: #fff;
padding: 1.5rem;
margin: 0 auto;
}
.order form .inputBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.order form .inputBox .input {
width: 49%;
}
.order form .inputBox .input span{
display: block;
padding: .5rem 0;
font-size: 1.5rem;
color: var(--light-color);
}
.order form .inputBox .input input,
.order form .inputBox .input textarea{
background: #eee;
border-radius: .5rem;
padding: 1rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
margin-bottom: 1rem;
width: 100%;
}
.order form .inputBox .input input:focus,
.order form .inputBox .input textarea:focus{
border: 1rem solid var(--green);
}
.order form .inputBox .input textarea{
height: 20rem;
resize: none;
}
.order form .btn {
margin-top: 0;
}
.order {
padding-bottom: 20px;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
text-align: center;
}
.footer .box-container .box{
padding: 5rem 0;
font-size: 2.5rem;
color: var(--black);
}
.footer .box-container a{
display: block;
padding: 5rem 0;
font-size: 1.5rem;
color: var(--light-color);
text-decoration: none;
}
.footer .box-container a:hover{
color: black;
text-decoration: none;
}
.footer .credit {
text-align: center;
border-top: .1rem solid rgba(0,0,0,.1);
font-size: 2rem;
color: var(--black);
padding: .5rem;
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.footer .credit span {
color: black;
}
.footer {
background: #fbe7d7;
}
\\\\ Order CSS \\\\\
.order .sub-heading {
color: white;
}
.order .heading {
color: white;
}
.catering {
color: #d45a28;
text-align: right;
font-size: 20px;
padding-top: 40px;
padding-right: 10px;
font-weight: bold;
font-family: 'Times New Roman';
}
@media (max-width:991px){
html {
font-size: 55%;
}
header{
padding: 1rem 2rem;
}
section{
padding: 2rem;
}
}
@media (max-width:850px){
.about {
display: block;
text-align: center;
padding-bottom: 900px;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding-top: 150px;
justify-content: center;
height: auto;
margin-right: 10px;
}
.share{
padding-left: 5000px;
}
}
@media (max-width:800px){
header .icon #menu-bars{
display: inline-block;
}
header .navbar {
position: absolute;
top: 100%; left: 0; right: 0;
background: #a8b98a;
border-top: .1rem solid rgba(0,0,0,.2);
border-bottom: .1rem solid rgba(0,0,0,.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .navbar a{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: #eee;
}
.image {
display: block;
text-align: center;
}
.about .row .image img{
height: auto;
width: 40%;
margin-left: 200px;
}
.home .home-slider .slide .content h3{
font-size: 5rem;
}
.about h3{
text-align:center;
font-size: 2rem;
}
}
@media (max-width:400px){
html {
font-size: 50%;
}
.dishes .box-container .box img {
height: auto;
width: 100%;
}
.order form .inputBox .input {
width: 100%;
}
.about {
display: block;
text-align: center;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding: 200px 0 200px 0;
justify-content: center;
height: auto;
margin-right: 1000px;
}
}
CodePudding user response：
You should use media queries. Please lern the basics first.
CodePudding user response：
Please check this https://www.w3schools.com/css/css3_mediaqueries.asp for learning CSS responsiveness and media queries.
Also check this one please: https://www.w3schools.com/css/css_rwd_mediaqueries.asp