I am looking for some help please, my wife has me build her business website tmtclinic.com . She is very meticulous as to how she wants the site to look thus the reason I built it. I have done my best to create a desktop version that she approves of. I finally have convinced her that her site should be responsive as many people now just use their phones thus her site doesn’t work that well when using a mobile device. My biggest problem is how to make the nav bar responsive so it would work on a phone. I know this is backwards as to not starting with the mobile version first, I just could not convince her that when I started. I am self taught and I am stuck… lol . Any suggestions or where to look would be greatly appreciated.
<div class="wrapper">
<div class="logo">
<img src="images/tmtlogo.png" alt="TMT Logo">
</div>
<div class="container">
<div class="grid-8-columns">
<div class="yelbox">
</div>
<div class="massage">
</div>
<div class="yelbox">
</div>
<div class="physio">
</div>
<div class="yelbox">
</div>
<div class="acupuncture">
</div>
<div class="yelbox">
</div>
<div class="contact">
</div>
<div class="yelbox">
</div>
<!--This is blank space to help align navbar word links-->
<div> </div>
<div> <a href="massage.html">Massage Therapy</a>
</div>
<div> <a href="about.html">About Us</a>
</div>
<div> <a href="physio.html">Physiotherapy</a>
</div>
<div> <a href="facilities.html">Facilities</a>
</div>
<div> <a href="acupuncture.html">Acupuncture</a>
</div>
<div> <a href="contact.html">Contact Us</a>
</div>
<div> <a href="booking.html">Online Booking</a>
</div>
<!--This is last blank space below yellow box above nav bar-->
<div> </div>
</div>
CSS
/* CSS Document */
html { background-color: #6E8C8D; }
body {
min-height: 100vh;
max-width: 1440px;
/*background-color: papayawhip;*/
margin: 0 auto;
}
.body{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100%;
background-color: #6E8C8D;
/* margin: 0px;*/
padding: 0px;
margin: 0px;
/*margin:auto;
/*display: flex;
justify-content: center;*/
/*padding: 20px 40px 50px 40px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"active;
background-color :#6F8C8F;
/*max-width:1430;*/
}
.wrapper{
/* width: 1430px;*/
height: 732px;
background-image: url("images/bgheader.png");
background-repeat: no-repeat;
}
.logo{
/*display: block;*/
display: flex;
justify-content: center;
padding-bottom: 20px;
}
.container{
position:relative;
width: 1430px;
}
/*This is the Grid for the nav bar pics and nav buttons*/
.grid-8-columns{
width: 1430px;
display: grid;
grid-template-columns: 149.2px 171px 149.2px 171px 149.2px 171px 149.2px 171px 149.2px;
grid-template-rows:171px 50px;
grid-gap: 0px;
place-items:center;
font-size: 22px;
}
.grid-8-columns a{
padding-top:10px;
text-decoration: none;
color: #f7eccc;
}
.grid-8-columns a:hover{
background-color: #ddd;
transition: background-color 0.5s;
color: white;
}
.yelbox{
height:171px;
width:149.2px;
background-image: url("images/yelbox.jpg")
}
.massage{
height:171px;
width:171px;
background-image: url("images/massage.jpg")
}
.physio{
height: 171px;
width:171px;
background-image: url("images/physio.jpg")
}
.acupuncture{
height: 171px;
width:171px;
background-image: url("images/acu.jpg")
}
.contact{
height: 171px;
width:171px;
background-image: url("images/contact.jpg")
}
/*This is the reception picture*/
.reception-image{
display: flex;
justify-content: center;
}
Thank you
