Meine Bildkomponente und mein Suchfeld sind nicht zentriert [Duplikat] ⇐ JavaScript

[Anonymous]

Ich habe eine Website erstellt. Früher sah sie gut aus, war aber nur auf dem Desktop im Vollbildmodus zu sehen. Ich habe einige Anweisungen befolgt und mein Display zusammen mit anderen notwendigen Änderungen von Grid auf Flex umgestellt. Während meine Website jetzt auf dem Telefon gut aussieht, bleibt sie ab einem bestimmten Punkt in der Mitte links auf dem Bildschirm und bleibt dort. Mein Verdacht ist, dass bei der Vergrößerung des Bild- und Suchfelds ab einem bestimmten Zeitpunkt die Höhe außerhalb des zulässigen Bereichs liegt und statt über den Bildschirmbereich hinaus an Ort und Stelle bleibt. Bitte helfen Sie mir
index.html:

Code: Select all

sokrat

App.css:

Code: Select all

body {
background: linear-gradient(to right, #1c1c1c, #343434);
color: white;
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}

.app-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
box-sizing: border-box;
text-align: center;
}

.app-container img {
display: flex;
position:relative;
align-items: center;
justify-content: center;
max-width: 90%;
width: 100%;
max-height: 60vh;
height: auto;
margin-bottom: 2rem;
}

.search-wrapper {
width: 100%;
max-width: 500px;
justify-content: center;
position: relative;
display: flex;
}

.search-box {
position: relative;
width: 100%;
}

.search-input {
padding: 0.8rem 1rem;
width: 100%;
padding: 0.8rem 1rem;
border-radius: 30px;
border: none;
background: rgba(255, 255, 255, 0.06);
color: white;
font-size: 1.05rem;
outline: none;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}

.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 0.5rem;
background: rgba(10, 10, 10, 0.95);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
max-height: 260px;
overflow-y: auto;
z-index: 50;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.suggestion-item {
padding: 10px 14px;
cursor: pointer;
color: #eee;
font-size: 0.96rem;
}

.suggestion-item:hover,
.suggestion-item.active {
background: rgba(255, 255, 255, 0.03);
}

.suggestions strong {
color: #fff;
font-weight: 700;
}

/*For smaller screens*/
@media (max-width: 480px) {
.app-container img {
margin-bottom: 1.5rem;
max-width: 90%;
}

.search-input{
font-size: 0.9rem;
padding: 0.6rem 1rem;
}
}

App.jsx:

Code: Select all

import React from "react";
import PopularTopics from "./component/PopularTopics";
import "./App.css";

export default function App() {
const handleSearch = (query) => {
const randomHash = Math.random().toString(36).substring(2, 10);
const cache = JSON.parse(localStorage.getItem("cr_cache") || "{}");
cache[randomHash] = { query, created: Date.now() };
localStorage.setItem("cr_cache", JSON.stringify(cache));

window.location.href = `/course/${randomHash}`;
};

return (

[img]/images/Sokrat2.png[/img]




);
}

Ich möchte nur, dass mein Bild und mein Suchfeld immer in der unteren Mitte des Bildschirms angezeigt werden