From b2e5fdfacc8b73f8e8e1037281ab39d237ee3e20 Mon Sep 17 00:00:00 2001 From: Annika Date: Fri, 13 May 2022 14:33:11 -0600 Subject: [PATCH] completed mobile layout --- index.html | 32 ++++++++++++++++---------------- style.css | 23 +++++++++++++---------- 2 files changed, 29 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index defbb28..02b4601 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@
- +

TOMODACHI

@@ -93,7 +93,7 @@ -
+

The Retro Renaissance is Here!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.

@@ -103,12 +103,8 @@
-
-

Powerful 16-bit Computing, in an Affordable Package!

-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga velit nesciunt id error nobis iste sequi hic voluptates ut cupiditate.

-
-
-
+
+
  • 🐈 lorem3
  • 🐈 lorem3
    • @@ -118,15 +114,19 @@
+
+

Powerful 16-bit Computing, in an Affordable Package!

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga velit nesciunt id error nobis iste sequi hic voluptates ut cupiditate.

+
-
-
+
+
-
+

🐈 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.

@@ -135,8 +135,8 @@
-
-
+
+

💯💯💯

@@ -145,7 +145,7 @@
-
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.

@@ -153,7 +153,7 @@
-
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.

@@ -169,7 +169,7 @@

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error tempore similique enim necessitatibus nisi.

-
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?

diff --git a/style.css b/style.css index eedc0c0..8d2bbe4 100644 --- a/style.css +++ b/style.css @@ -47,7 +47,7 @@ main { } #pitch-bar { - height: 30vh; + min-height: 30vh; background-color: var(--dark-bg); color: var(--light-text); } @@ -64,12 +64,20 @@ main { background-color: var(--dark-bg); } -.hanging-card { - min-height: 30vh; - position: relative; - top: 10vh; +@media only screen and (min-width: 768px) { + .hanging-card { + min-height: 30vh; + position: relative; + top: 10vh; + } + + /* Push Down 15vh */ + .pd-15 { + margin-top: 15vh; + } } + #pitch { background-image: linear-gradient(135deg, #c90051, #194bd3); } @@ -89,11 +97,6 @@ img { min-height: 70vh; } -/* Push Down 15vh */ -.pd-15 { - margin-top: 15vh; -} - .left-bar { border-left-width: 0.4em; border-left-style: solid;