I have been developing a personal portfolio website on my Mac, but unfortunately it is not rendering correctly on any browser run on Windows OS. It works as intentioned on mobile and MacOS. The website is aaronalberg.com. On Windows, the cards under "Projects" and the footer both overlap on the sidebar. Additionally, when the window gets to about 800px wide or smaller when the sidebar is changed for the header, the #leftheader and #rightheader sections stack (and as a result the rightheader is not shown) despite them having a total width of 50vw each (which should add up to 100 as it does on Mac).
I have tried using a CSS wipe template which did not work and any specific pixel or viewport changes I make to accommodate the Windows differences mess up the layout on other operating systems. Some hopefully relevant html/css is below
Any help is much appreciated. Thank you!
:root {
--main-theme: #5AF;
--sidenav-length: 250px;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: white;
width: 100%;
position: relative;
font-family: sans-serif;
text-align: center;
margin: 0;
padding-bottom: 10vh;
overflow-x: hidden;
}
header {
padding-top: 5px;
display: none;
background-color: var(--main-theme);
color: white;
height: 150px;
}
#headertext {
text-align: left;
padding-right: 2%;
padding-left: 2%;
font-size: 3em;
}
#leftheader {
float: left;
margin-left: 1vw;
margin-top: 2vh;
width: 49vw;
}
#rightheader {
font-size: 1.2em;
float: left;
text-align: center;
width: 50vw;
margin-top: 5vh;
}
#rightheader p {
display: inline;
}
#rightheader div {
padding-bottom: 5%;
}
header i {
color: white;
display: inline;
font-size: 1.5em;
}
/* side nav */
.sidenav {
height: 100%;
width: var(--sidenav-length);
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: var(--main-theme);
overflow-x: hidden;
padding-top: 20px;
color: white;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav i {
display: inherit;
}
#wrapper {
width: 100%;
margin: 0;
text-align: center;
padding-bottom: 100px;
}
#outerwrapper {
margin:0;
width: calc(100vw - var(--sidenav-length));
position: absolute;
z-index: 2;
right:0;
}
/* project chunks */
.projectcard {
background-color: #e8e8e8;
padding: 1%;
padding-top: 2%;
height: 220px;
}
.projectcard:nth-child(2n) {
background-color: #d8d8d8;
}
.projectpic {
clear: both;
width: 180px;
margin-right: 2%;
float: left;
margin-left: 5px;
}
.projecttitle {
text-align: left;
}
#projectlabel {
margin-left: 50px;
}
.projecttext {
text-align: left;
}
.projecttext a {
color: blue;
text-decoration: none;
}
#projects {
padding-bottom: 50px;
}
<body>
<header>
<div id="leftheader">
<h1 id="headertext">Aaron Alberg</h1>
<p>Engineer. Leader. Innovator.</p>
</div>
<div id="rightheader">
<div>
</div>
<div style="line-height: 1.4;">
<span class="icon">
<i style="display: inline;" class="fas fa-map-marker-alt"></i>
</span>
<p> Chicago, IL & Champaign, IL</p>
</div>
</div>
</header>
<div class="sidenav">
<img src="files/profilepic.jpg" alt="profile picture" class="profile">
<h1>Aaron Alberg</h1>
<p>Engineer. Leader. Innovator.</p>
<i class="fas fa-map-marker-alt"></i>
<p>Chicago, IL</p>
<p>Champaign, IL</p>
</div>
<div id="outerwrapper">
<div id="wrapper" class="center">
<div id="bio">
<h2>Hello!</h2>
<p class="profiletext">My name is Aaron Alberg. I'm currently studying <b class="blue">computer science</b> at the University of Illinois at Urbana-Champaign. I'm passionate about applying <b class="blue">human-centered design principles</b> to projects ranging from software development to community outreach. I believe the key to engineering the best solutions is a <b class="blue">deep understanding of user needs</b>. Take a look at <a href="files/Resume.pdf" target="_blank" class="resume-link">my resume.</a></p>
</div>
<h2 id="projectlabel">Projects</h2>
<div id="projects">
<div class="projectcard">
<img src="files/UPDmural.png" alt="UPD mural" class="projectpic">
<h3 class="projecttitle">Urbana Park District <span class="inprogress">(in progress)</span></h3>
<p class="projecttext">As a part of UIUC's chapter of Design for America, my team is collaborating with the Urbana Park District to fine tune the implementation of UPD's new Strategic Plan. Specifically, we are working to find ways to promote a culture of diversity and inclusion that the staff are accountable for creating and upholding. </p>
<a href="UPDproject.html" class="button">Read More</a>
</div>
<div class="projectcard">
<img src="files/websitepic.png" alt="picture of website" class="projectpic">
<h3 class="projecttitle">This Website <span class="inprogress">(in progress)</span></h3>
<p class="projecttext">Since doing a project is way more fun than following an online tutorial, I've used the development of this website to teach myself HTML/CSS. I also work to ensure that the site is scalable for future editing, accessible, and functions on all screen sizes. When I come across a feauture I like, I learn how to use it by implementing it here.</p>
<a href="Websiteproject.html" class="button">Read More</a>
</div>
</div>
<div id="inprogress">
<p class="center">**This website is very much a work in progress and is currently experiencing rendering issues specifically on Windows OS. Stay tuned!**</p>
</div>
</div>
<footer>
<p class="center foottext">
<a href="mailto:aaronjalberg@gmail.com"><i class="fas fa-envelope"></i> <span class="nearicon">aaronjalberg@gmail.com</span> </a> <span class="pipe">|</span>
<a href="https://www.linkedin.com/in/aaron-alberg" target="_blank" ><i class="fab fa-linkedin"></i> <span class="nearicon">linkedin.com/in/aaron-alberg</span> </a><span class="pipe">|</span>
<a href="https://github.com/aaronalberg" target="_blank"><i class="fab fa-github"></i> <span class="nearicon">github.com/aaronalberg</span></a>
</p>
<p class="center">© Aaron Alberg 2019</p>
</footer>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire