My react web page is not responsive on switching device - javascript

How do make my home page responsive? i tried using meta but not working, this is my home.js page which contains what i want to make responsive, needs to add or remove anything?
import React from "react";
import "../css/Home.css";
import { Link } from "react-router-dom"
import logo from '../images/logo2.jpg';
function HomePage(){
return(
<div className="background">
<div className="navbar">
<div className="header"><br />
<img src={logo} alt="logo"/>
<h3>MyChat</h3>
</div>
<nav>
<ul>
<li><input type="text" placeholder="Search News" /></li>
<li><Link to = '/'>HOME</Link></li>
<li><Link to = ''>NEWS</Link></li>
<li><Link to = ''>TIMELINE</Link></li>
<li><Link to = ''>CONTACT</Link></li>
</ul>
</nav>
</div>
<div className = "backform">
<div className="info">
<h2>Make Cool Friends !!!</h2>
<p>Friend Finder is a social network template that can be used to <br />
connect people. The template offers Landing pages, <br />
News Feed, Image/Video Feed, Chat Box, Timeline and lot more. <br /><br />
What are you waiting for? Join Now.
</p>
</div>
<div className="holdback">
<form>
<Link to =''>Login</Link>
<Link to = ''>Register</Link>
</form>
</div>
</div>
</div>
);
}
export default HomePage;
This is my css file for home.js design that contains background, image, navbar, header, text styling and fonts, i tried using meta device display for my css as well but not working.
#font-face {
font-family: 'Pacifico';
src: url('../fonts/Pacifico.ttf');
}
#font-face {
font-family: 'Lobster';
src: url('../fonts/Aladin-Regular.ttf');
}
#font-face {
font-family: 'Neo';
src: url('../fonts/Nunito-SemiBoldItalic.ttf');
}
.background{
background-image: url("../images/home-background1.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 680px;
}
.header{
display: inline-block;
margin: 0 2rem 0 20px;
padding: 0 5rem 10px ;
}
.header h3{
font-size: larger;
font-family: 'Pacifico';
font-stretch: expanded;
color: #764CDF;
margin: 5px 5rem 10px;
padding: 0 5rem;
position: static;
}
.header img{
border-radius: 50%;
width: 40px;
height: 40px;
margin-left: 7rem;
position: absolute;
}
.navbar{
background-color: #5EECFF;
width: 100%;
height: 5rem;
}
.navbar ul{
list-style: none;
float: right;
padding: 0 3rem;
margin: 0;
text-decoration: none;
}
.navbar ul li{
display: inline;
padding: 1rem;
font-size: larger;
font-family: 'Lobster';
}
.navbar ul li input{
border-radius: 10px;
background-color: #F0F0F0;
width: 200px;
height: 20px;
text-indent: 1rem;
transition: width 0.4s ease-in-out;
opacity: 0.5;
font-family: 'Times New Roman', Times, serif;
font-size: small;
}
a:link,
a:hover{
text-decoration: none;
color: white;
}
a:active{
color: #764CDF;
}
a:focus{
color: white;
background-color: #764CDF;
}
.info{
color: white;
padding-left: 15rem;
padding-top: 8rem;
font-family: 'Neo';
}
.backform{
display: inline-flex;
}
.holdback{
margin: 0;
padding-left: 2rem;
margin-left: 5rem;
margin-top: 5rem;
border-radius: 5px;
background-color: #F0F0F0;
width: 500px;
height: 300px;
text-align: left;
display: inline-block;
}

Your CSS must have different styles for each breakpoint you want to make it responsive.
There are two ways to achieve that:
You write it by yourself. As in the comments, there are already several guides for you to learn how to do it. Example
There are some frameworks/libraries out there that people are using it to achieve such thing. It makes our lives easier. You can search and study them and then choose by yourself which one you want to use. To name a few (popular ones), Bootstrap and Tailwind.

Related

JS NavSlide not working properly when I click on it

I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>
It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>

Why does my bottom right image keep getting stretched?

I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.
This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`
body {
background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
height: 100%;
background-position: center;
background-repeat: repeat;
background-size: cover;
font-family: 'Carter One', cursive;
color: white;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
text-align: center;
}
img {
border: 5px solid #FFFFFF;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Carter One', cursive;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #F3721D;
color: white;
}
.top_left{
float: left;
position: absolute;
left: 16px;
}
.right {
float: right;
position: absolute;
top: 200px;
right: 16px;
}
.bottom_left {
float: left;
bottom: 0px;
left: 16px;
z-index: 10;
padding: 0px;
margin: 500px 500px 100px 16px;
}
.bottomright {
float: right;
bottom: 0px;
right: 16px;
z-index: 10;
padding: 0px;
margin: 500px 16px 100px 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>Charlotte's super cool art gallery</title>
<link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Commissions
About
</div>
<div class="cubed">
<h1>I design stuff.</h1>
</div>
<div class="cubed">
<h2> My works.</h2>
</div>
<div class="top_left">
<img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left">
<p>
A digital illustration of Sherlock Holmes <br>from the TV series Sherlock.
</p>
</div>
<div class="bottom_left">
<img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372">
<p>
A digital illustration of Clockson. An <br>original character based on antique clocks
</p>
</div>
<div class="right">
<img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right">
<p>
Doctor Who fanart of the 13th Doctor.
</p>
</div>
<div class="bottomright">
<img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310">
</div>
</body>
</html>
`
You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the

Set viewport width where text starts to wrap

I'm looking for a way in CSS (or JS but preferably CSS) to define the breakpoint where text starts to wrap. I'm using React 17/CRA and CSS modules.
I have a React app that has a header bar with two pieces of content. On the left-hand side is the three-word title of the app in an h1 tag. On the right-hand side is the logged-in user's profile photo and name, composed of several elements within a span. If I narrow the viewframe, first the content overflows and then, if I narrow it more, the title of the app starts to wrap.
I would like the title to wrap before any overflow happens so all the content stays on the screen as long as possible. All the Googling I've done has only come up with info on overflow-wrap or word-break, which aren't what I'm looking for. The text is wrapping like I want it to, I'd just rather it did so sooner.
The code of my component is:
import React from 'react'
import anonymousAvatar from './anonymousAvatar.jpg'
import styles from './dashboardHeader.module.css'
const DashboardHeader ({data}) => (
<div className={styles.root}>
<div className={styles.bar}>
<span className={styles.headerContainer}>
<h1 className={styles.header}>Three Word Title</h1>
</span>
<span className={styles.profile}>
<div className={styles.profileText}>
<p className={styles.textTop}>{data.name}</p>
<p className={styles.textBottom}>{data.email}</p>
</div>
<img className={styles.avatar} src={data.image_url || anonymousAvatar} alt='User Avatar' referrerPolicy='no-referrer' />
</span>
</div>
</div>
)
export default DashboardHeader
The CSS module I currently have is:
.root {
position: fixed;
top: 0;
width: 100%;
}
.bar {
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: #000;
color: #fff;
display: flex;
justify-content: space-between;
}
.headerContainer {
display: grid;
align-items: center;
}
.header {
font-family: 'Cinzel Decorative', sans-serif;
margin: 0;
font-size: 1.5rem;
}
.profile {
background-color: #000;
border: none;
display: grid;
align-items: center;
grid-template-columns: 2fr 1fr;
max-width: 30%;
cursor: pointer;
margin-right: 16px;
}
.profileText {
display: grid;
}
.textTop, .textBottom {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1.025rem;
color: #fff;
text-align: right;
margin: auto 0;
}
.textTop {
margin-bottom: 2px;
}
.textBottom {
margin-top: 2px;
}
.avatar {
height: 64px;
width: 64px;
border-radius: 50%;
box-shadow: 0px 0px 12px #fff;
margin-left: 24px;
margin-right: 16px;
}
Here is the component at the full width of my laptop screen:
Here it is at an intermediate width:
And here it is at the very narrow width where the text finally starts to wrap (notice there is still overflow):
As noted in the comments you can simply change the width of the element at your desired breakpoint like in the top blue div of the example below. I'm using animations to help you visualize the results but you would decrease the width of the element in question at your media query breakpoint. I recommend this method because it doesn't require you to increase your HTML markup.
body, div, p, span {
display: flex; justify-content: center; align-items: center;
background-color: #eee;
font-family: Arial;
}
div {
justify-content: space-between;
transform: translateY( -5rem );
position: absolute;
width: 90%; height: 5rem;
padding: 1rem;
background-color: #222; color: #eee;
}
div, div:nth-of-type( 1 ) p:first-of-type {
animation-name: contract; animation-duration: 5s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
div:nth-of-type( 2 ) {
transform: translateY( 5rem );
}
#keyframes contract { 100% { width: 25%; } }
p {
background-color: transparent;
text-transform: uppercase;
}
p:first-of-type {
font-size: 1.5rem; font-weight: bold;
}
span {
margin: 0.5rem;
border-radius: 50%;
width: 2.5rem; height: 2.5rem;
}
<style>
* {
box-sizing: border-box; padding: 0; margin: 0;
}
html, body {
height: 100%;
}
html {
font-size: 0.5rem;
}
div:nth-of-type( 1 ) p:first-of-type::before,
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps first';
position: absolute; top: -4rem;
border-radius: 1rem; padding: 1rem;
background-color: #07f; white-space: nowrap;
}
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps last';
top: auto; bottom: -4rem;
background-color: #f07;
}
</style>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
I'm simply using the contract animation to manually decrease the width of the paragraph in the first div before it's width is forced smaller by its container. If this doesn't work in your particular setup you could use hidden <br> elements with display: none until your desired breakpoint to set them to block.

How do I float elements left and right in a <div> tag?

I'm unable to format https://evolveyourgaming.com/extensions/ecademy.php correctly. I cannot get the images to float:left with their names underneath, and the bios to float:right. Currently my VS Code is giving me yellow squiggly lines for all my Float properties. Can anyone offer any insight as CSS is not my strong suit.
function condenseLinks() {
var x = document.getElementById("links");
if (x.className === "vidlinks") {
x.className += " responsive";
} else {
x.className = "vidlinks";
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 100%;
text-align: center;
display: inline-block;
}
.vidbody {
background-color: black;
height: 100%;
display: inline-block;
}
.logo {
float: left;
max-width: 90%;
padding-top: 6px;
}
.vidhead {
background-color: black;
position: relative;
height: 10%;
width: 100%;
}
body {
background-color: black;
background-size: cover;
display: inline-block;
width: 100%;
height: 100%;
}
.container {
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
}
.teamBios .container {
display: flex;
}
.container img {
float: left;
}
.teamBios .about-details {
flex: 1;
}
.vidlinks {
float: right;
width: 45%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
/* Hide the link that should open and close the topnav on small screens */
.vidlinks .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.left {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.right {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.mid {
text-align: center;
display: inline-block;
width: 10%;
}
.vidlinks a {
color: white;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.vidlinks a:hover,
.dropdown:hover .dropbtn {
color: #7e3bfe;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
color: #8449ff;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.mid {
display: none;
}
.left {
width: 80%;
}
.right {
width: 80%;
}
.vidbody {
background-color: black;
height: auto;
width: auto;
display: inline-block;
}
.vidlinks {
text-align: center;
width: 90%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
.logo {
text-align: center;
max-width: 100%;
padding-top: 2px;
}
}
.vidlinks.responsive {
position: relative;
}
.vidlinks.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.vidlinks.responsive a {
float: none;
display: block;
text-align: left;
}
.vidlinks .responsive .dropdown {
float: none;
}
.vidlinks .responsive .dropdown-content {
position: relative;
}
.vidlinks .responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
/* Style the form */
#regForm {
background-color: #ffffff;
margin: 100px auto;
padding: 40px;
width: 70%;
min-width: 300px;
}
/* Style the input fields */
.input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
.input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
</head>
<body>
<div class='content'>
<div class='vidhead'>
<div class='logo'>
<p>
<img src='Evolvelogo.png' style='width:24%; height: 30%;'>
</p>
</div>
<div class='vidlinks' id='links'>
<a href='../index.html#about' style='text-decoration:none; font-weight:200px; ' class='inactive'>ABOUT</a>
<a href='../index.html#team' style='text-decoration:none; ' class='inactive'>TEAM</a>
<a href='../index.html#contact-form-section' style='text-decoration:none; ' class='inactive'>CONTACT</a>
<a href='tournament.php' style='text-decoration:none; ' class='active'>TOURNAMENT</a>
<a href='privacy.php' style='text-decoration:none; ' class='active'>PRIVACY POLICY</a>
<a href='ecademy.php' style='text-decoration:none; ' class='active'>ECADEMY</a>
<a href="javascript:void(0);" class="icon" onclick="condenseLinks()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class='vidbody' style="text-align:center; width:100%;">
<h2 style="color:white; background:black; color:#8449ff; font-family:cairo, sans-serif; font-style:normal; font-weight:200px;">
<img src="eCademy_LogoPNG.png" alt="ecademy" style="width:400px; height:100px;">
</h2>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="evolvephoto1.png" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Kevin Kapoor <br> IGN/Handle: Irøh (or sometimes ZukosUncle) <br> Twitch: #irohsTeaShop <br>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes
for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
</div>
</div>
<div class="teamBios" style="color:black; background:black; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Desmond Wong2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Desmond Wong <br> IGN/Handle: Overlorred <br> Twitch: #overlorredtft <br>
</div>
<p>
A versatile coach in every sense of the word, he brings four years of experience competing at the top level of the collegiate esports scene as both a player and as a coach. Combined with his six years as a high elo solo queue player, his coaching style
brings together all the knowledge he has learned over the years from playing with and against the best. It is the perfect blend of his experiences from his time in the competitive scene and grinding the solo queue ladder. Whether you're completely
new to the game or an aspiring pro, Desmond is ready to guide you every step of the way to help you reach your goals.
</p>
</div>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Alex Gingrich2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> Name: Alex Gingrich<br> IGN/Handle: Chunder<br> Twitter: #alexgingrich<br>
</div>
<p>
Alex has built his entire professional life around applying traditional sports and business strategy into esports. Although Alex has been playing competitive games since the days of Halo 3 he got his first taste in esports player improvement at grad school
when he managed the inaugural Varsity Overwatch teams at The University of Akron. Since then Alex has gone on to work for ReKTGlobal, owners of Team Rogue and The London Royal Ravens, where he gains first hand knowledge of professional esports
and the mentalities of what makes a great player.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I think you put the image and name under e parent div and make the display flex. Also remove the unwanted tag. Hope it works
<div class="container">
<div class="bioPhotos">
<img src="evolvephoto1.png">
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
.container{
display: flex;
width: 50%;
}
.bioPhotos{
display: flex;
flex-direction: column;
}
.about-details{
display: flex;
}
p{
display: flex;
align-items: center;
justify-content: center;
}
Change this part:
<div class="container" style="display: flex;width: 60%;justify-content: center;padding: 20px;">
<div class="cullomnOne">
<div class="bioPhotos" style="width:256px; height:266px;min-width: 256px;min-height: 256px;">
<img src="evolvephoto1.png" style="width:100%; height:100%;">
</div>
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p style="padding: 20px;">
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>

Issues with responsive mobile menu

How do I make this work? I keep fiddling around with the codes but I get no luck. I'm trying to make a responsive mobile menu. I tried searching google and can't find any solution. Thanks
<div class="sidenav" id="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
Home
Order
About
</div>
<div class="main_header">
<div class="main_nav">
<span onlick="openNav()">&#9776</span>
</div>
<h1>Treat your tastebuds</h1>
Order a coffee
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("main_nav").style.width = "100%";
}
function closeNav(){
document.getElementById("closeNav").style.width="0";
}
</script>
Here is the CSS
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition:0.5s;
}
sidenav a{
color: white;
text-decoration: none;
display: block;
transition: 0.3s;
font-size: 16px;
font-weight: 100;
text-align: center;
padding: 1em 0;
}
.main_header{
background-image: url(coffee1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: left;
color: white;
width: 100%;
height: 750px;
}
.main_header h1{
font-size: 36px;
font-weight: 900;
margin-left: 2em;
margin-top: 8em;
}
.btn_one{
margin-left: 11em;
color: white;
background-color: darkslategray;
text-decoration: none;
padding: 1em 2.5em;
}
.main_nav{
height: 40px;
}
.main_nav span{
color: white;
font-size: 30px;
text-decoration: none;
line-height: 40px;
margin-left: 0.25em;
float: left;
cursor: pointer;
}
Utilizing the bootstrap framework is an option.
Here is an example that provides a side navigation.
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/
You have various typos in your code as well as undefined elements that you're attempting to manipulate.
Firstly, you have:<span onlick="openNav()">&#9776</span> which contains a typo. It's 'onclick', not 'onlick'.
Next, you're attempting to manipulate an element "main_nav", but in your HTML and CSS, you defined main_nav as a class (using a period). So, if you change your html to <div class="main_nav"> your issue for that will be fixed.
I'm unsure what your final menu design will be, but those changes will fix the problems you're running into.

Categories