Develop Reference

Image SRC Not Considered A Link Or Not Loading

I am building a small social media site to enhance my skills in HTML CSS & JS, but I have ran into a problem.
I have an <img> in a <button>, and I am trying to change that image onclick() [the button will hide some text under the button].
The problem is that the image will not load. When I click the button, the new image will not load, and when I re-click the image to reload the image that was in the fist place, it won't load either.
The only clue I have is this error massage every time I click the buttton GET file:///C:/Users/emile/Desktop/Mini%20learning%20projects/Social%20App/scripts/iconsarrow-up.webp net::ERR_FILE_NOT_FOUND. This last part net::ERR_FILE_NOT_FOUND is weird because I copied the path of the image.
And when I try to open the image from the console in a new tab, it will tell me Your file couldn’t be accessedIt may have been moved, edited, or deleted. ERR_FILE_NOT_FOUND
Any ideas ?
Here is the code:
function ButtonHide() {
const element = document.getElementById('friend-request-container');
const personnaInfoDiv = document.getElementById('personnal-info');
const sideBarArrowTooltip = document.getElementById('sidebup-arrow-tooltip');
const friendRequestCount = document.getElementById('friend-request-count');
const sidebarArrowImage = document.getElementById('friends-arrow');
if (element.style.display === 'none') {
element.style.display = 'inline-block';
document.getElementById("personnal-info").style.marginBottom = "0px";
sideBarArrowTooltip.innerHTML = 'Hide Requests';
sidebarArrowImage.src = 'icons\arrow-up.webp';
} else {
element.style.display = 'none';
friendRequestCount.style = 'display: inline-block; position: absolute; top: 0px; width: 200px;';
document.getElementById("personnal-info").style.marginBottom = "15px";
sideBarArrowTooltip .innerHTML = 'Show Requests';
sidebarArrowImage.src = 'icons\vector-down-arrow.png';
}
}
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
width: 372px;
margin-left: 20px;
margin-right: 30px;
}
.sidebar-top-container {
border-bottom: solid 2px rgb(199, 199, 199);;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 223px;
font-family: Roboto, Arial;
font-weight: bold;
margin-bottom: 50px;
}
.personnal-info,
.friend-request-container {
position: relative;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
position: absolute;
top: -8px;
margin-left: 2px;
}
.up-arrow {
width: 25px;
position: absolute;
top: 7.5px;
display: inline-block;
margin-bottom: 5px;
}
.friend-request-container {
margin-top: 10px;
}
.friend-request-image {
display: inline-block;
height: 46px;
border-radius: 23px;
margin-left: -9px;
}
.friend-request-count {
display: inline-block;
position: absolute;
top: 0px;
}
.sidebar-container {
display: inline-block;
margin-left: 190px;
width: 30px;
height: 30px;
}
.name-and-profile {
position: relative;
}
.up-arrow {
position: absolute;
top: -26px;
}
.name-and-profile {
position: relative;
}
.hide-requests-button{
background-color: transparent;
display: inline-block;
border: none;
height: 35px;
width: 35px;
padding: 4px;
border-radius: 22px;
margin-bottom: 85px;
margin-top: 4px;
margin-left: 308px;
padding-right: 30px;
padding-left: 5px;
cursor: pointer;
margin-top: 26.5px;
}
.hide-requests-button:hover {
background-color: rgb(215, 215, 215);
}
.hide-requests-button:active {
background-color: rgb(180, 180, 180);
}
.friend-request-count {
font-size: 15px;
font-weight: bold;
font-family: Roboto, Arial;
color: rgb(118, 118, 118);
}
.sidebar-container .tooltip {
margin-left: 300px;
}
.sidebar-container .tooltip {
z-index: 200;
}
.sidebar-container:hover .tooltip{
opacity: 1;
}
.sidebar-container .tooltip {
font-family: Roboto, Arial;
position: absolute;
background-color: gray;
color: white;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
font-size: 12px;
bottom: -30px;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
white-space: nowrap;
}
.sidebar-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}
<div class="sidebar">
<div class="sidebar-top-container">
<div class="sidebar-heading">
<h1 class="home">Home</h1>
<a class="create-button" href="C:\Users\emile\Desktop\Mini learning projects\Social App\scripts\Home Page.html">Create</a>
</div>
<div class="personnal-info" style="height: 32px;" id="personnal-info">
<div class="name-and-profile">
<img class="sidebar-profile-picture" src="C:\Users\emile\Desktop\New HTML Course\icons\my profile.jpg">
<p class="my-user-name">Emile Feghali</p>
</div>
<div class="sidebar-container">
<button class="hide-requests-button" onclick="ButtonHide()">
<img class="up-arrow" id="friends-arrow" src="C:\Users\emile\Desktop\New HTML Course\icons\arrow-up.webp">
</button>
<div class="tooltip" id="sidebup-arrow-tooltip">Hide Requests</div>
</div>
</div>
<div class="friend-request-container" id="friend-request-container">
<img class="friend-request-image" src="C:\Users\emile\Desktop\New HTML Course\icons\add-friends-image.jpg">
<p class="friend-request-count" id="friend-request-count">2 pending friend requests</p>
</div>
</div>

HTML/CSS - ScrollBar missing

Problem:
The scrollbar is missing on my (social-media) website. It's because of the "position: fixed;" thing. Everything was fine before. I tried to set overflow to "overflow: auto;" where I set "position: fixed". But it only made things worse, and still... no scrollbar.
I tried to create two different divs (one for a menu, with pages etc. (class: "row") and other for user stuff (settings, inbox, profile etc.) (class: "row2"))).
HTML:
<body>
<!-- HEADER, LOGO, SLOGAN, HR -->
<header>
<h1>PTRN</h1>
<h2>something</h2>
<hr class="headerhr">
</header>
<!-- SIDE BAR 1 -->
<div class="container">
<div class="row">
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
<div class="searchbar">
<p class="searchplaceholder">Search</p>
</div>
</div>
</div>
<!-- SIDE BAR 2 -->
<div class="container2">
<img class="menu1" src="file:///C:/Users/calex/Downloads/download.%20(1).jpg">
<div class="row2">
Inbox
Notifications
Meetings
Inbox
<p class="shared">Shared</p>
Documents
Photos
<div class="row2_2">
Settings
Help & Contact
</div>
</div>
<!-- POST SAMPLE -->
<div class="container3">
<img src="https://tiffanieanne.com/wp-content/uploads/2020/08/Batter-Spencer-Best-Views-in-San-Francisco-SF-Instagram-Worthy-Photo-Spots-SF-Photography-tiffanieanne.com_-768x954.jpg" alt="San Francisco, CA, USA">
<div class="container4">
<p class="username_post">Chita Cosmin</p>
<p class="jobb">Founder & CEO of Pictoren Platforms, Inc. since 2020</p>
<img class="prpic" src="https://images.unsplash.com/photo-1540512663861-0dcbe11ab7a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80" alt="Profile Pic">
<div class="container5">
<b class="fakebutton">Info</b>
</div>
</div>
</div>
CSS:
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css");
/* BODY */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Sans-Serif;
background: #a9c4db;
}
/* BACKGROUND NOTE: #acb6b7 */
/* LOGO AND SLOGAN */
h1 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 7px;
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
h2 {
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
position: absolute;
top: 70px;
left: 49.5%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
/* HEAEDER SEPARATOR */
.headerhr {
border: none;
height: 3px;
width: 40.6cm;
background-color: #9700FF;
margin-top: 90px;
}
/* HEADER */
header {
display: flex;
flex-wrap: wrap;
height: 90px;
background-color: black;
justify-content: space-between;
align-items: center;
}
/* SIDE BAR 1 */
.container {
position: fixed;
top: 110px;
left: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row {
display: flex;
flex-direction: column;
font-size: 15px;
position: fixed;
left: 87px;
top: 190px;
overflow: auto;
}
.row a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.searchbar {
position: fixed;
background-color: #f9f9f9;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: #d9d9d9;
z-index: 4000;
top: 150px;
width: 180px;
height: 37px;
top: 135px;
overflow: auto;
}
.searchplaceholder {
position: fixed;
font-size: 13px;
color: #8a8a8a;
top: 135px;
left: 95px;
overflow: auto;
}
.container bi-house {
position: absolute;
left: 50%;
size: 250px;
}
/* SIDE BAR 2 */
.container2 {
position: fixed;
top: 110px;
right: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 180px;
overflow: auto;
}
.row2 a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.shared {
opacity: 40%;
color: black;
font-size: 14px;
}
.row2_2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 160px;
bottom: 50px;
overflow: auto;
}
.menu1 {
position: fixed;
max-width: 100%;
max-height: 100%;
float: right;
border-radius: 22px;
margin-top: 0%;
z-index: 2000;
margin-left: 1%;
border-width: 1px;
border-color: white;
overflow: auto;
}
/* POST SAMPLE */
.container3 {
position: absolute;
top: 2px;
right: 147%;
background-color: white;
height: 700px;
width: 640px;
border-radius: 22px;
}
img {
max-width: 100%;
max-height: 100%;
float: right;
margin-top: 15.43%;
border-radius: 22px;
margin-right: 5.6%;
border-width: 1px;
border-style: solid;
border-color: #efeded;
}
.container4 {
position: absolute;
top: 24px;
right: 5%;
background-color: white;
height: 70px;
width: 570px;
border-radius: 22px;
border-width: 2px;
border-style: solid;
border-color: #efeded;
z-index: 999;
}
.username_post {
position: fixed;
font-size: 18px;
font-weight: 600;
right: 860px;
top: 137px;
overflow: auto;
}
.prpic {
position: fixed;
max-width: 10%;
max-height: 10%;
float: left;
top: -100px;
left: 500px;
border-radius: 100%;
clip-path: circle();
overflow: auto;
}
.jobb {
position: fixed;
color: #878787;
font-size: 13px;
top: 165px;
left: 561px;
overflow: auto;
}
.fakebutton{
position: fixed;
font-size: 17px;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
top: 174px;
right: 500px;
z-index: 1001;
overflow: auto;
}
.container5 {
position: absolute;
z-index: 1000;
background-color: white;
height: 30px;
width: 65px;
border-radius: 17px;
border-width: 2px;
border-style: solid;
border-color: #9700FF;
right: 12px;
top: 19px;
}

If you want 'overflow' to work, then try adding 'max-height' property to that element in your css code.

Onclick Function sidebar

I am new to Javascript and I've recently been trying a sidebar menu.
I am trying to make the menu come out from the left side and overlay the main content when the hamburger icon is clicked. I have managed to make the menu overlay the main content but when it comes to javascript animation, I have tried a couple of things and search on internet but found no solutions to my problem.
I am trying to make so that when the .hamburger button is clicked, the .nav-links div's width changes from 0px to 300px.
Here's my code and a couple of Javascript functions I have tried.
Here's my code
HTML :
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>`
CSS
`
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
JavaScript
document.getElementById('hamburger') = function openMenu(){
document.getElementById('nav-links').menu.style.width="300px";
}
function openMenu(){
if(document.getElementById('nav-links').click === true)
document.getElementById('nav-links').menu.style.width="300px";
}

Try this:
document.getElementsByClassName('hamburger')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "300px"
})
document.getElementsByClassName('CloseBTN')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "0"
})
.line {
width: 30px;
height: 3px;
background: white;
border: 5px solid black;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
color: white;
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>
Some of your javascript was messed up so I fixed that, and I added some css to make everything (such as the actual menu lines itself) visible.

Submit button not showing up in the same area on different screens

My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>

In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}

Having issues making the page responsive

What I need is for the page to be fully responsive and for some reason it isn't.
Mobile view
Here's the CSS and HTML. We are generating the page using React.
/* CSS Document */
/*
#font-face {
font-family: futura;
src: url("../fonts/Futura-Book.ttf");
}
#font-face {
font-family: futura italic;
src: url("../fonts/Futura_ICG_Book_Oblique.ttf");
font-style: italic, oblique;
}
*/
/*--------------------------------ALL PAGES----------------------------------------*/
/*Body Style*/
* {
font-family: futura, verdana;
box-sizing: border-box;
}
h1 {
font-family: futura, verdana;
text-align: center;
}
body {
margin: auto;
min-width: 600px;
}
/*NAVIGATION STYLE*/
nav {
list-style-type: none;
padding: 0px;
overflow: hidden;
background-color: #4a486d;
margin: 0 auto;
min-width: 100px;
max-width: 950px;
text-align: center;
}
.navcontainer {
width: 100%;
background-color: #4a486d;
}
#search {
width: 20px;
height: 15px;
padding-right: 6px;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #1c1c1c;
text-decoration: none;
color: white;
}
nav a:visited {
background-color: #1c1c1c;
text-decoration: none;
color: white;
}
/*JUMBOTRON STYLE*/
.jumbotron {
text-align: center;
border-radius: 25px;
background-color: white;
padding: 0px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 10px;
clear: both;
}
/*CONTAINER STYLE*/
.container {
text-align: center;
background-color: #f5f4f9;
padding: 2%;
clear: both;
width: 100%;
margin: 0 auto;
}
/*BACKGROUND COLOR*/
#backcol {
background-color: #f5f4f9;
height: 100%;
}
/*LEFT LINKS STYLING*/
#sidenav {
list-style-type: none;
margin: 0;
padding: 5px;
padding-left: 10px;
width: 16%;
background-color: #f5f4f9;
position: absolute;
height: 55%;
overflow: auto;
clear: both;
text-align: left;
float: left;
border-radius: 3px;
}
li a {
display: block;
color: #1c1c1c;
padding: 8px 0 0px 25px;
text-decoration: none;
padding: 5px;
}
li a.active {
text-decoration: none;
font-weight: bold;
}
li a:hover:not(.active) {
background-color: #1c1c1c;
color: white;
text-decoration: none;
}
#leftNavPadding {
padding: 10px;
}
#searchbar {
height: 15px;
width: 15px;
margin: 1px;
}
#quick {
border-radius: 3px;
margin: 0;
padding: 0;
position: absolute;
clear: both;
float: left;
}
/*PIC STYLING*/
#pic {
width: 50%;
stroke: #8e8db7;
stroke-width: 4;
margin: auto;
}
#pic2 {
width: 30%;
stroke: #8e8db7;
stroke-width: 4;
margin: auto;
padding-top: 45px;
padding-bottom: 57px;
}
/*BUTTON STYLE*/
button {
background-color: #6e6e9a;
border: none;
color: white;
padding: 5px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
margin: 4px;
}
button:hover {
background-color: #1c1c1c;
}
.vpButton {
padding-top: 0px;
}
.profilesButton {
margin-top: 0px;
}
/*FORM STYLE*/
form {
text-align: center;
padding-top: 60px;
}
label.formLabel {
display: inline-block;
width: 300px;
font-size: 18px;
font-weight: bold;
}
#fieldset {
margin-top: -30px;
border: 2px solid #515078;
}
#legend {
color: #515078;
font-size: 24px;
}
#fieldsetBorder {
border: 1px dotted #8685a7;
}
#fieldsetBorder2 {
border: 1px dashed #8685a7;
}
#legendLeft {
text-align: left;
}
.astrex {
color: red;
}
.trcolor {
background-color: #8a87a2;
}
/*FOOTER*/
footer {
background-color: #b1b2d2;
color: #1c1c1c;
text-align: center;
height: 70px;
clear: both;
margin-top: 10px;
}
footer p {
margin-right: 140px;
}
#footlogo {
float: left;
margin-left: 0px;
height: 70px;
width: 190px;
}
/*SOCIAL MEDIA BUTTONS IN FOOTER*/
.socialMediaButtons {
float: right;
margin: 1%;
padding-top: 9px;
}
.socialMediaButtons:hover {
background-color: #1c1c1c;
}
/*CONTAINER STYLE*/
#containerWidth {
width: 960px;
}
/*PROFILE PAGE STYLE*/
#title {
color: white;
font-weight: bold;
font-size: 30px;
text-align: center;
}
#title2 {
color: white;
font-weight: bold;
font-size: 20px;
text-align: center;
}
#title3 {
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20%;
text-align: left;
padding-left: 20px;
}
#text {
color: white;
font-size: 15px;
text-align: left;
padding-left: 20px;
}
.topPad {
padding-top: 40px;
}
.bottomMargin {
margin-bottom: 800px;
}
.empty {
height: 20px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------INDEX PAGE----------------------------------------*/
#topDiv {
float: left;
margin: 0px;
background-color: #555b8f;
}
#arrow1 {
height: 55%;
width: 55%;
}
#introheading {
font-family: futura bold;
color: white;
font-size: 70px;
top: 40%;
right: 18%;
float: right;
position: absolute;
}
#introtext {
width: 26%;
position: absolute;
top: 70%;
right: 16%;
float: right;
font-family: Futura, sans-serif;
font-size: 15px;
color: white;
text-align: justify;
float: right;
clear: left;
line-height: 1.5em;
}
#bottomDiv {
float: right;
margin: 0px;
background-color: #555b8f;
padding-bottom: 20%;
}
#bottomArrow {
float: right;
padding: 0px;
margin: 0px;
right: 0px;
height: 55%;
width: 55%;
}
#heading2 {
font-family: futura bold;
color: white;
left: 150px;
top: 130px;
position: relative;
}
#secondHeading {
font-size: 70px;
}
#endtext {
width: 30%;
position: relative;
left: 140px;
top: 180px;
font-family: futura;
font-size: 15px;
color: white;
text-align: justify;
line-height: 1.5em;
}
#heximg {
left: 170px;
top: 20px;
position: relative;
}
#hexstyle {
height: 40%;
width: 40%;
margin-bottom: 50px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------LOGIN PAGE START----------------------------------------*/
#divContainer2 {
height: 550px;
width: 550px;
margin: 0 auto;
position: relative;
}
#introDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
text-align: center;
padding-top: 120px;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
/*BUTTON STYLING*/
.buttonlayout {
width: 150px;
height: 60px;
padding: 3.5px 3px;
font-size: 20px;
font-family: futura;
margin: 10px auto;
}
#guestButton {
margin-top: -1px;
padding: -3.5px -3px;
}
.displayBlock {
display: block;
width: 150px;
height: 60px;
padding: 3.5px 3px;
margin: 0 auto;
margin-bottom: 20px;
font-size: 20px;
font-family: futura;
}
#logInDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
padding-top: 80px;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
#logInForm {
margin: 0 auto;
width: 350px;
}
input.form {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 20px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#registerDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
text-align: center;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
#registerForm {
text-align: center;
margin-top: 80px;
}
/*--------------------------------LOGIN PAGE FINISH----------------------------------------*/
/*--------------------------------MY PROFILE----------------------------------------*/
/* hide nav button */
#hide {
float: left;
margin: 5px;
}
.clear {
clear: both;
}
/*HEXAGON PROFILE IMAGE STYLING*/
svg {
width: 19%;
stroke: #8e8db7;
stroke-width: 4;
}
#profileInfo {
width: 90%;
height: 750px;
background-color: #8a83d1;
margin: 0 auto;
z-index: 3;
position: relative;
border-radius: 3px;
overflow: hidden;
padding: 10px;
}
.profileback {
text-align: center;
background-color: #f5f4f9;
padding: 2%;
clear: both;
width: 100%;
margin: 0 auto;
background-image: url(../img/back.jpg);
background-repeat: no-repeat;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
padding: 6px 12px;
cursor: pointer;
background-color: none;
position: absolute;
right: 70px;
width: 54px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------POD SEARCH PAGE START---------------------------------------*/
#basictxt {
text-align: left;
padding: 11px;
padding-bottom: 24px;
margin: 5px;
}
#quote {
text-align: left;
color: #4a486d;
font-size: 20px;
padding: 10px;
padding-top: 65px;
}
.hireButton {
padding-top: 5px;
width: 70px;
padding: 5px;
}
#hireSize {
width: 70px;
height: 70px;
}
/*--------------------------------POD SEARCH PAGE FINISH---------------------------------------*/
/*--------------------------------POD PROFILE PAGE START----------------------------------------*/
#enquire {
width: 150px;
height: 50px;
margin: 0px;
margin-top: -10px;
}
#divContainer {
width: 700px;
height: 700px;
margin: 0 auto;
background-color: #f5f4f9;
margin-bottom: 5%;
}
#skills {
width: 330px;
height: 750px;
background-color: #6e6e9a;
margin: 0 auto;
float: left;
z-index: 2;
position: relative;
border-radius: 3px;
overflow: hidden;
}
#skilllist {
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20%;
text-align: left;
padding-left: 20px;
list-style-type: none;
}
#bio {
width: 330px;
height: 750px;
background-color: #8a83d1;
margin: 0 auto;
float: left;
margin-left: -150px;
z-index: 3;
position: relative;
border-radius: 3px;
overflow: hidden;
padding: 10px;
}
#workHistory {
width: 330px;
height: 750px;
background-color: #6a6cae;
margin: 0 auto;
float: left;
margin-left: -150px;
z-index: 1;
position: relative;
border-radius: 3px;
overflow: hidden;
text-align: center;
}
/*--------------------------------POD PROFILE PAGE FINISH---------------------------------------*/
/*--------------------------------BOOK NOW PAGE START----------------------------------------*/
label {
display: inline-block;
width: 220px;
font-size: 26px;
font-weight: bold;
}
input.form1 {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 16px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#booknowFieldset {
border: 1px dashed;
}
/*--------------------------------BOOK NOW PAGE FINISH----------------------------------------*/
/*--------------------------------CURRENT BOKINGS PAGE START---------------------------------------*/
#currentBookingTable,
.bookingtr,
.bookingtd {
text-align: center;
margin: 10px;
}
.bookingtd {
max-width: 400px;
min-width: 50px;
}
/*--------------------------------CURRENT BOKINGS PAGE FINISH---------------------------------------*/
/*--------------------------------HISTORIC BOOKING----------------------------------------*/
#Table,
th,
td {
margin: 10px;
padding: 10px;
}
/*TABLE STYLING*/
table,
th,
td {
text-align: center;
margin: 10px;
margin-left: 20%;
}
td {
max-width: 300px;
min-width: 100px;
min-height: 300%;
margin: 10px;
background-color: white;
}
th {
padding: 10px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------CONTACT US----------------------------------------*/
input.inputstyle {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 16px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#color {
background-color: white;
}
/*---------------------------------------------------------------------*/
var Content = React.createClass({ render: function() { return (
<div>
<div id="topDiv">
<img src="img/arrow1.png" alt="logo" id="arrow1" />
<h1 id="introheading">Hello, Welcome to Pod</h1>
<div id="introtext">
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
</div>
</div>
<div id="bottomDiv">
<img src="img/arrow2.png" alt="logo" id="bottomArrow" />
<div id="heading2">
<h2 id="secondHeading">Like what <br/> you see?</h2>
</div>
<div id="endtext">
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
<p>POD is a pool creatives able to provide important, flexible support to fledgling and fast-growing businesses in the creative digital sector. With members recruited and retained based on a desire to develop sector-relevant skills, SharpFutures POD
offer clients the opportunity to bring on board temporary, support staff while also playing a valuable part in young people’s career development. Committing to a new full-time team member may be a stretch for small businesses, whereas having
had the opportunity to ‘try before you buy’ can give employers confidence to commit.
</p>
<br/>
<br/>
<div id="heximg">
<img id="hexstyle" src="img/hex2.png" alt="logo" />
<br/>
<img id="hexstyle" src="img/hex2.png" alt="logo" />
<br/>
<img id="hexstyle" src="img/hex2.png" alt="logo" />
</div>
</div>
</div>
</div>
)} }); ReactDOM.render(
<Content />, document.getElementById('content'));
What I need to know is how I get the page to be responsive without it looking awful. Any advice or help with this would be appreciated. We've been trying for days now and came up with nothing.
Thanks.

You have a lot of very specific sizes and widths and heights in your CSS file, which is great, if there was only one screen size.
What is generally recommended is that you choose to use either:
Break-points and media queries, wherein which you specify screen size(s) and use the media queries to change the size/placement of certain screen elements.
OR, you could go with:
Relative sizing (ie. percentages or EM sizing units) with media queries.
Here is a link to some example code:
css-tricks.com - Media Queries for Standard Devices

You need to update your CSS first. For a responsive website you need to write everything in percentage. As I noticed you have written many height, width, padding etc. in pixels(px).
Updating them all with % will help you to make it responsive.
Post that you need to use media files for particular screen size. I suggest you to use % instead to px and to do Google how to use media files.

The problem is the absolute positioning making a element be over content and isn't fixed automatically. Make the elements dynamic, then use #media screen and.. in CSS3 to make the layout responsible.

You are testing your desktop view in mobiles. It is obvious that somewhere you will find broken or overridden UI elements.
So you can customize your design by using media queries and viewport to make designs fit to your resolution.
For example you can reduce font sizes and image sizes and their positions.
Hope it helps.