Added addional styling to smaller devices to reduce the padding of main content paragraphs

This commit is contained in:
Luke Else 2023-09-04 22:58:24 +01:00
parent 6961d9c34d
commit 79795bc060
2 changed files with 20 additions and 16 deletions

View File

@ -14,18 +14,6 @@
display: flex;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.profile {
display: none;
}
.flex-container {
align-items: center;
flex-direction: column;
}
}
.profile {
border-radius: 100%;
height: 8em;
@ -33,10 +21,26 @@
padding: 1em 1em 1em 1em;
border: .5em solid var(--bg-grad);
}
.about {
padding: 0em 5% 0em 5%;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
align-items: center;
flex-direction: column;
}
.profile {
display: none;
}
.about {
padding: 0px;
}
}
h1 {
color: var(--red);

View File

@ -24,9 +24,9 @@
</style>
<nav>
<a href = "test">//tab</a>
<a href = "test">//tab</a>
<a href = "test">//tab</a>
<a href = "/">//Profile</a>
<a href = "test">//Repos</a>
<a href = "test">//Contact</a>
</nav>
<div class="main-container">