Not displaying two columns #19939
Replies: 3 comments 4 replies
-
|
It seems like your --- a/style.css
+++ b/style.css
@@ -14,6 +14,7 @@
--color-white: #fff;
--spacing: 0.25rem;
--container-3xl: 48rem;
+ --container-5xl: 64rem;
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-3xl: 1.875rem;
@@ -185,27 +186,30 @@
.flex {
display: flex;
}
+ .grid {
+ display: grid;
+ }
.inline-block {
display: inline-block;
}
- .table {
- display: table;
- }
- .max-w-3xl {
- max-width: var(--container-3xl);
- }
- .border-collapse {
- border-collapse: collapse;
+ .max-w-5xl {
+ max-width: var(--container-5xl);
}
- .resize {
- resize: both;
+ .grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-wrap {
flex-wrap: wrap;
}
+ .items-center {
+ align-items: center;
+ }
.justify-center {
justify-content: center;
}
+ .gap-5 {
+ gap: calc(var(--spacing) * 5);
+ }
.space-y-5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -228,10 +232,6 @@
.rounded-xl {
border-radius: var(--radius-xl);
}
- .border {
- border-style: var(--tw-border-style);
- border-width: 1px;
- }
.bg-fuchsia-700 {
background-color: var(--color-fuchsia-700);
}
@@ -288,13 +288,6 @@
.text-white {
color: var(--color-white);
}
- .underline {
- text-decoration-line: underline;
- }
- .outline {
- outline-style: var(--tw-outline-style);
- outline-width: 1px;
- }
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -330,11 +323,6 @@
inherits: false;
initial-value: 0;
}
-@property --tw-border-style {
- syntax: "*";
- inherits: false;
- initial-value: solid;
-}
@property --tw-font-weight {
syntax: "*";
inherits: false;
@@ -343,19 +331,12 @@
syntax: "*";
inherits: false;
}
-@property --tw-outline-style {
- syntax: "*";
- inherits: false;
- initial-value: solid;
-}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-space-y-reverse: 0;
- --tw-border-style: solid;
--tw-font-weight: initial;
--tw-tracking: initial;
- --tw-outline-style: solid;
}
}
}
|
Beta Was this translation helpful? Give feedback.
-
|
should I run npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch |
Beta Was this translation helpful? Give feedback.
-
|
Ensure the Tailwind packages are installed first: Then you can run: |
Beta Was this translation helpful? Give feedback.
-
|
I did, but still I can not see two columns, you can see it in my repo |
Beta Was this translation helpful? Give feedback.
-
|
No, you changed npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
Instead, revert to the previous commit to undo the changes in |
Beta Was this translation helpful? Give feedback.
-
|
I did not change anything in index.html except the new output.css but not working |
Beta Was this translation helpful? Give feedback.
-
|
You did change some things in diff --git a/index.html b/index.html
index 0486139..f25d0d1 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,9 @@
-
<!DOCTYPE html>;
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link href="./style.css" rel="stylesheet" />
+ <link href="/src/output.css" rel="stylesheet" />
<title>Kemal'in sitesi</title>
</head>
<body class="bg-slate-950 text-3xl text-white ">
@@ -18,10 +17,12 @@
</ul>
</nav>
</header>
- <section class="space-y-5 text-center max-w-5xl mx-auto px-5 py-12 grid gap-5 grid-cols-2 items-center ">
- <img src="/Zuzu03.jpg" alt="ZuzuveKemal" width="1024" height="744" class="rounded-xl"/>
+ <section class=" text-center max-w-5xl mx-auto px-5 py-12 grid gap-5 md:grid-cols-2 items-center ">
+
+
+ <div class="space-y-5 ">
- <div>
+ <img src="/Zuzu03.jpg" alt="ZuzuveKemal" width="1024" height="744" class="rounded-xl"/>
<h1 class="text-4xl font-bold ">
Siz de programcı olarak kariyerinize başlamak istiyorsanız, doğru yerdesiniz! Ben Kemal, yazılım dünyasında deneyimli bir rehber olarak, size programlama becerilerinizi geliştirmek ve kariyerinizi ilerletmek için gereken tüm kaynakları sunuyorum, başarılar dilerim.
@@ -31,8 +32,8 @@ <h1 class="text-4xl font-bold ">
(Önce telefon/tableti bırakın, bu işler dizüstü/masaüstü'nden yapılır.)Sayfa kaynağını görmek için sağ tıklayın ve "Sayfa Kaynağını Görüntüle" seçeneğini seçin. (F12 tuşu ile daha ayrıntılısını görebilirsiniz.) Orada, bu sayfanın HTML, CSS ve JavaScript kodlarını inceleyebilirsiniz. Bu, web geliştirme sürecini anlamanıza yardımcı olabilir ve kendi projelerinizde kullanabileceğiniz teknikleri öğrenmenize olanak tanır.
</p>
- </div>
<a href="" class="inline-block bg-fuchsia-700 text-blue-500 px-7 py-4 rounded-full transition-colors hover:bg-fuchsia-800">Tıklayın</a>
+ </div>
</section>
</body> |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
repo: https://github.com/kemalgencay/SPAhtml
What am I doing wrong?
Beta Was this translation helpful? Give feedback.
All reactions