Due to the endless possibilities in css, I couldn’t tell you specifically how to fix it. But if you press f12 while using the app you’ll pull up the developer tools and you can click the “Toggle device toolbar” in the top left corner of that panel (CTR+SHIFT+M) and then switch between the 3 (L,M,S) mobile devices to see what it’ll look like. A good understanding of Margin, Border, and Padding will make it easier to fix.
Bootstrap also offers classes that make this type of tedious work a little more bearable. With the Bootstrap grid system you can stack elements differently based on the size of the window/device. I highly suggest learning Bootstrap if you plan to do more web development.
So at some point in making my home page, I had everything stacked nicely on mobile. Somewhere along the way (I think after adding a navbar and messing around with my overall code) my site on mobile no longer stacks nicely and is now a jumbled mess. I’m relatively new to CSS, and while I like how my site looks, I feel like my code isn’t very clean. Could really use some help with both mobile stacking and code cleanup in general. I work full time in healthcare (which you can imagine is pretty crazy due to COVID right now) so my only time to learn and troubleshoot is after working clinic and I’d appreciate any extra help I can get! Here is my codepen: https://codepen.io/purplexmoss/pen/QWbxopN
<!--DOCTYPE html-->
<html lang="en">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=768" name="viewport">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2:400,600|Roboto+Mono:400,700&display=swap" rel="stylesheet">
<style type="text/css">
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%);
border: none;
border-radius: 18px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%);
}
::-webkit-scrollbar-thumb:active {
background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%);
}
::-webkit-scrollbar-track {
background: #c894f3;
border: 0px none #ca9cf9;
border-radius: 8px;
}
::-webkit-scrollbar-track:hover {
background: #edf095;
}
::-webkit-scrollbar-track:active {
background: #edf095;
}
::-webkit-scrollbar-corner {
background: transparent;
}
</style>
<link href="home.css" type="text/css" rel="stylesheet" />
<title>Purple x Moss</title>
</head>
<body>
<h1>purple x m0ss</h1>
<!-- NAVBAR -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Sen&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">home</a>
<a href="#about">about</a>
<a href="#accessibility">accessibility</a>
<div class="dropdown">
<button class="dropbtn">projects
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#" class="">Link 1</a>
<a href="#" class="">Link 2</a>
<a href="#" class="">Link 3</a>
</div>
</div>
<a href="#about" class="nav">get in touch</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- inspiration: https://dribbble.com/shots/3784003-Plant-description-page -->
<div class="wrap">
<div class="card">
<div class="card-pic-wrap">
<img src="https://imagizer.imageshack.com/img923/8607/oZaOnm.png" alt="flowers and succulents embedded in purple moss">
</div>
<div class="card-content">
<h3><span class="h3highlight"> summary » </h3highlight></h3>
<p>hi, i'm thenessa! pronounced /"tuh" "ness" uh"/<br /><br />i love coding with <b>HTML</b> & <b>CSS</b> & am actively learning <b>Javascript</b> & <b>jquery</b> while working full time in ophthalmology. as someone who works daily with patients with low vision, partial & full blindness, cataracts, macular degeneration, & degenerative retinal conditions, i am interested in making websites & technology vision accessible. our current generation has grown up with heavy usage & reliance upon phones, iPads, and laptops, & as our generation ages we will want to continue using these technologies as easily & efficiently as possible. i believe the time is now for improving adaptibility & accessibilty of tech and the web, not only for us, but for current generations and those who come after us.</p>
<p><a href="index.html" class="">more about me</a></p>
</div>
</div>
</html>
/* CSS */
html, body {
height: 100%;
}
body {
background: rgb(255,247,180); background: linear-gradient(90deg, rgba(255,247,180,1) 0%, rgba(195,153,226,1) 64%, rgba(186,154,242,1) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
h1 {
background: linear-gradient(to top, yellow 2%, transparent 30%);
font-family: 'Baloo Chettan 2', cursive;
color: #5e3c91;
margin-top: 100px;
margin-bottom: 50px;
text-align: top;
justify-content: center;
font-size: 36px;
}
/* navbar */
#mytopnav
.topnav {
overflow: hidden;
border-radius: 25px;
background: rgb(59,41,69); background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%);
}
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
border-radius: 25px;
background: rgb(59,41,69);background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%);
}
.active {
background-color: "";
color: #ffffff;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #ffffff;
padding: 14px 16px;
font-family: inherit;
margin: 0;
border-radius: 25px;
background: rgb(59,41,69);background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%);
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 16px;
background-color: #816996;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background: rgb(59,41,69);background: linear-gradient(90deg, rgba(59,41,69,1) 0%, rgba(147,108,179,1) 52%, rgba(181,164,208,1) 100%);
border: 2px dotted #f0ebad;
color: #ffffff;
}
.dropdown-content a:hover {
background-color: #816996;
color: #ffffff;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
* {
box-sizing: border-box;
}
.wrap {
height: 100%;
}
.card {
display: flex;
flex: 0 0 auto;
background: transparent;
max-width: 1000px;
margin: 30px 0;
border: 4px dotted #462278;
border-radius: $b-r;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.card-pic-wrap {
border-radius: $b-r 0 0 $b-r;
width: 275px;
flex: 0 0 auto;
position: relative;
background: linear-gradient(to bottom, #f5e4b5, #a19ad9);
}
img {
position: relative;
bottom: 3em;
left: 50%;
margin-left: -175px;
width: 350px;
-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.15)));
}
.card-content {
padding: 3em 4em 2em;
}
h3 {
font-family: "Courier New", Courier, monospace;
color: #70518c;
font-weight: bold;
font-size: 2.5em;
border-radius: 25px;
margin: 0 0 1em;
}
.h3highlight {
background-color: #fff2ac;
background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
border-radius: 25px;
}
a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
border-radius: 25px;
background-color: #f2ee74;
}
a:hover {
background: #15077d;
color: #f5e4b5;
border: 3px dotted #f5e4b5;
}
@media (max-width: 790px) {
body {
overflow-x: hidden;
}
