as the title states I am having trouble displaying my webpage properly on other screen resolutions. I am not certain why it looks so bad on other screen resolutions and not scaling to the device itself. I don't know exactly where to start, I would think that it has something to do with the way that I positioned my div containers but I am not too sure and would like a more experience person to answer my question before I started messing the code. below is my HTML code
<!DOCTYPE.html>
<html dir="ltr" lang="en-US">
<head>
<script src="myScript.js"></script>
<title> Online Resume </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div >
<header id="header">
<h1> Noah Harris </h1>
<h2> <div id="positioning_a"> Email: </div> <div id="positioning_b"> <a href="mailto:[email protected]"> [email protected] </a> </div> <div id="positioning_c"> Phone Number: </div>
<div id="positioning_d"> 703-400-5998 </div> </h2>
</div>
</header>
<div id="right_border">
<div id="left_border">
<img src="Badge.jpg" alt="Badge">
<h3> About Me </h3>
<p> Hello readers My name is Noah and I am partaking in the Cloud Resume Challenge <a href="https://cloudresumechallenge.dev/instructions/">To learn more about the challenge click here</a>. I have been studying Information Technology since i graduated highschool
although I was not sure exactly what field I wanted to get into. I was able to get a IT helpdesk job which help me understand the fundamentals but i knew that i wanted to learn more.
I later discovered the cloud and was intrigued by the freedom and creativity that could be expressed in the cloud.
I began to get curious and that drove me to get my AWS Solutions Architect Associate. I am now working on more projects so that i can score real world experience and even have some fun with it. </p>
<h3> Skills </h3>
<ul>
<li> <div >Software:</div> Windows 7, 8 and 10; HTML and CSS knowledge. Experience using IDE’s with C and Python. Virtualization troubleshooting of virtual machines and VDI’s.</li>
<br>
<li> <div >Hardware:</div> Troubleshooting HP printers; general computer builds and repairs; hardware installations and swaps. RAID Arrays, RAM and CPU replacement. Ability to troubleshoot and narrow down problems regarding hardware </li>
<br>
<li> <div >Networking:</div> Networking experience (running cables, troubleshooting connections, activating ports, basic router configuration, switches, Wi-Fi router) Familiar with
different cabling types such as CAT 5, CAT6, twisted pairs, fiber optic cables. </li>
<br>
<li> <div >Support:</div> Helpdesk: escalation and documentation on ticketing system, customer service support (email, phone, and in person). Assisting 40 customers per day. </li>
<br>
<li> <div >Cloud Computing:</div> Amazon Web Services, Cloud Architecture, Cloud Infrastructure. </li>
</ul>
<h3> Experience </h3>
<div > Navy Federal Credit Union </div>
<div > Service Desk Member </div>
<div > Vienna, VA </div>
<div > Feb 2018 - January 2021 </div>
<ul>
<li> Provided customer service to 30 customers a day. Talked to customers who needed technical support for their computers and active directory accounts. </li>
<br>
<li> Alerted management team when a technical outage in the credit union occurred to ensure that the issue gets patched as efficiently as possible. </li>
<br>
<li> Worked with colleagues in the event of a technical outage to minimize the call queue and effectively troubleshoot for a solution. </li>
</ul>
<h3> Education </h3>
<p > George Mason University </p>
<div > Fairfax, Va </div>
<div > Information Technology </div>
<div id="Upwards"> August 2017 - Present </div>
<ul>
<li> Year Up is a leading one-year career development program with 250 corporate partners around the country; the program includes college-level courses,
professional training, and a six-month internship. </li>
<br>
<li> Earned an Associate Degree from Northern Virginia Community in Information Technology with 67 credits. </li>
<br>
<li> Working towards a bachelor's degree in Information Technology with 120 credits. </li>
</ul>
<h3> AWS Solutions Architecture </h3>
<div > Cloud Computing </div>
<div > April 2021 </div>
<ul>
<li> Understands cloud architecture and how to host a highly available website. Able to write simple bash scripts on EC2 instances. </li>
<br>
<li> Able to execute best practices on security such as private subnets, firewalls, and security groups. </li>
<br>
<li> Understanding routing on Route 53 latency-based routing geolocation-based routing etc. </li>
<br>
<li> able to host a static website on S3. </li>
</ul>
</div>
</div>
<div id="footer">
<div >
</div>
<a href="https://www.linkedin.com/in/noah-harris-947b38152/" > Check me out on Linkedin</a>
</div>
</body>
</html>
and here is my external CSS code
body
{
margin: 0px 140px 0px 140px;
font-family: Rockwell;
}
#left_border
{
position: relative;
height: 100%;
border-left: 70px solid orange;
padding-left: 50px;
}
#right_border
{
position: relative;
height: 220%;
border-right: 70px solid orange;
padding-right: 50px;
}
#header
{
background-color: Black;
padding-bottom: 6%;
}
h1
{
color: orange;
font-size: 30px;
font-family: Rockwell;
position: absolute;
left: 45%;
}
h2
{
color: white;
text-align: center;
}
h3
{
font-weight: bold;
color: orange;
text-align: center;
}
#positioning_a
{
position: absolute;
left: 65%;
top: 3.5%;
color: orange;
font-size: 21px;
font-family: Rockwell;
}
#positioning_b
{
position: absolute;
left: 70.5%;
top: 3.5%;
font-size: 21px;
font-family: Rockwell;
}
#positioning_c
{
position: absolute;
top: 3.1%;
left: 15.5%;
color: orange;
font-size: 21px;
font-family: Rockwell;
}
#positioning_d
{
position: absolute;
top: 3.3%;
left: 29.5%;
font-size: 21px;
font-family: Rockwell;
}
a[href^="mailto:"]
{
color: white;
text-decoration: none;
}
img
{
position: relative;
width: 110px;
height: auto;
left: 90%;
margin-top: 30px;
}
footer
{
background-color: Black;
padding-bottom: 70px;
margin-top: 50px;
margin-top: 60px;
}
.Right_Side
{
margin-left: 80%;
}
.Upwards
{
position: relative;
bottom: 20px;
}
.pretty
{
background-color: #0e76a8;
color: White;
padding: 20px 20px 20px 20px;
text-align: center;
position: relative;
left: 42.5%;
top: 25px;
text-decoration: none;
}
#footer
{
background-color: Black;
padding-bottom: 70px;
border: 1px solid black;
}
.weight
{
font-weight: bold;
}
.Counter
{
position: relative;
top: 60px;
left: 25px;
color: white;
}
CodePudding user response：
I refactored all your code to be Responsive! with CSS grid and flexbox
not only CSS but also HTML to be semantic, easy to read...
the GitHub repo: https://github.com/Laaouatni/stackoverflow-my-answers/tree/main/79
try to see the @diego answer then copy this :)
I hope it will help you
here the fixed complete code:
* {
--linkedin-blue: #0e76a8;
}
body {
margin: 0;
}
.navbar {
background-color: black;
color: white;
}
#header {
display: flex;
align-items: center;
justify-content: space-evenly;
}
#header div {
display: flex;
gap: 0.5vw;
}
#header a {
color: white;
text-decoration: none;
}
#email-div>div:first-child,
#phone-div>div:first-child,
#header h1,
h3 {
color: orange;
}
.container h3 {
display: grid;
place-content: center;
}
.weight {
font-weight: bold;
}
.container {
display: grid;
background-color: white;
margin: 0 5vw;
padding: 2rem;
}
#skills ul,
#experience ul,
#education ul,
#aws-section ul {
display: grid;
gap: 0.5rem;
}
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.vertical-gap {
display: grid;
gap: 1rem;
}
.pretty {
background-color: var(--linkedin-blue);
color: White;
padding: 20px;
text-align: center;
text-decoration: none;
display: grid;
place-content: center;
cursor: pointer;
}
.bg-orange {
background-color: orange;
}<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<script src="myScript.js"></script>
<title> Online Resume </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav >
<header id="header">
<!-- 1- phone -->
<div id="phone-div">
<div>Phone Number:</div>
<div>703-400-5998</div>
</div>
<!-- 2- main title -->
<h1>Noah Harris</h1>
<!-- 3- email -->
<div id="email-div">
<div>Email:</div>
<div><a href="mailto:[email protected]">[email protected]</a></div>
</div>
</header>
</nav>
<div >
<div >
<!-- <img src="./Badge.jpg" alt="Badge"> -->
<!-- about me -->
<div id="aboutme">
<h3>About Me</h3>
<p> Hello readers My name is Noah and I am partaking in the Cloud Resume Challenge <a href="https://cloudresumechallenge.dev/instructions/">To learn more about the challenge click here</a>. I have been studying Information Technology since
i graduated highschool although I was not sure exactly what field I wanted to get into. I was able to get a IT helpdesk job which help me understand the fundamentals but i knew that i wanted to learn more. I later discovered the cloud
and was intrigued by the freedom and creativity that could be expressed in the cloud. I began to get curious and that drove me to get my AWS Solutions Architect Associate. I am now working on more projects so that i can score real
world experience and even have some fun with it.
</p>
</div>
<!-- skills -->
<section id="skills">
<h3> Skills </h3>
<ul>
<!-- 1 SOFTWARE-->
<li>
<div >Software:</div>
<span>
Windows 7, 8 and 10; HTML and CSS knowledge. Experience using IDE’s with C and Python. Virtualization troubleshooting of virtual machines and VDI’s.
</span>
</li>
<!-- 2 HARDWARE -->
<li>
<div >Hardware:</div>
<span>
Troubleshooting HP printers; general computer builds and repairs; hardware installations and swaps. RAID Arrays, RAM and CPU replacement. Ability to troubleshoot and narrow down problems regarding hardware.
</span>
</li>
<!-- 3 NETWORKING -->
<li>
<div >Networking:</div>
<span>
Networking experience (running cables, troubleshooting connections, activating ports, basic router configuration, switches, Wi-Fi router) Familiar with different cabling types such as CAT 5, CAT6, twisted pairs, fiber
optic cables.
</span>
</li>
<!-- 4 SUPPORT -->
<li>
<div >Support:</div>
<span>Helpdesk: escalation and documentation on ticketing system, customer service support (email, phone, and in person). Assisting 40 customers per day.</span>
</li>
<!-- 5 CLOUD COMPUTING -->
<li>
<div >Cloud Computing:</div>
<span>Amazon Web Services, Cloud Architecture, Cloud Infrastructure.</span>
</li>
</ul>
</section>
<!-- experience -->
<section id="experience">
<h3> Experience </h3>
<div >
<div >
<div >Navy Federal Credit Union</div>
<div >Service Desk Member</div>
</div>
<div >
<div >Vienna, VA</div>
<div >Feb 2018 - January 2021</div>
</div>
</div>
<!-- LIST experience -->
<ul>
<li>Provided customer service to 30 customers a day. Talked to customers who needed technical support for their computers and active directory accounts.</li>
<li>Alerted management team when a technical outage in the credit union occurred to ensure that the issue gets patched as efficiently as possible.</li>
<li>Worked with colleagues in the event of a technical outage to minimize the call queue and effectively troubleshoot for a solution.</li>
</ul>
</section>
<!-- education -->
<section id="education">
<h3>Education</h3>
<div >
<p >George Mason University</p>
<div >Fairfax, Va</div>
</div>
<div >
<div >Information Technology</div>
<div >August 2017 - Present</div>
</div>
<!-- LIST education -->
<ul>
<li> Year Up is a leading one-year career development program with 250 corporate partners around the country; the program includes college-level courses, professional training, and a six-month internship. </li>
<li> Earned an Associate Degree from Northern Virginia Community in Information Technology with 67 credits. </li>
<li> Working towards a bachelor's degree in Information Technology with 120 credits. </li>
</ul>
</section>
<!-- Amazon Web Services -->
<section id="aws-section">
<h3> AWS Solutions Architecture</h3>
<div >
<div > Cloud Computing </div>
<div > April 2021 </div>
</div>
<!-- LIST Amazon Web Services -->
<ul>
<li> Understands cloud architecture and how to host a highly available website. Able to write simple bash scripts on EC2 instances. </li>
<li> Able to execute best practices on security such as private subnets, firewalls, and security groups. </li>
<li> Understanding routing on Route 53 latency-based routing geolocation-based routing etc. </li>
<li> able to host a static website on S3. </li>
</ul>
</section>
</div>
</div>
<footer id="footer">
<a href="https://www.linkedin.com/in/noah-harris-947b38152/" >Check me out on Linkedin</a>
</footer>
</body>
</html>CodePudding user response：
I advise you to follow many good techniques when developing a responsive webpage, here I explain to you:
- Replacing in your CSS absolute units such as px for percentages or em. It is always much better to work with relative measurements rather than absolute ones. From my experience, I always try to work with em, here is a conversion from px to em.
- Using responsive layouts like flex or grid.
- Adding metadata related to the viewport in the HTML head tag. I can see you haven't written it. As we can read in W3Schools viewport is the user's visible area of a web page. It varies with the device so it will be smaller on a mobile phone than on a computer screen. You should include the following element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In conclusion, try to avoid absolute positioning because it is not the best option. Try to follow this advice and I am sure your webpage will turn so much better. :D.
CodePudding user response：
This is a common problem I would advice that you read up on what viewports are on w3schools.com .A viewport is basically the visible area on a user’s device. As we both know, the visible area of a desktop is different from that of a notebook, tablet and a mobile phone.
The HTML , CSS you have displayed on your PC is not responsive to other view ports .
The way you can go about this is by writing the HTML and CSS in such a way that it will respond to all devices . You need to use relative and absolute units like em and %, that way the code you have written will scale with respect to the viewport.
Media queries are also very functional . Media queries will help customize for a particular viewport.
W3schools.com will give you a great direction on these topics. I hope you enjoy yourself while learning.