Web Responsive

[tonioller]

No description provided.

[tonioller]

Os paso un ejemplo de estilos para la web

styles_user.css

/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container {
display: flex;
flex-direction: row;
height: 100vh;
}

/* Sidebar */
.sidebar {
width: 25%;
background-color: #f4f4f4;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sidebar-image {
max-width: 100%;
height: auto;
border-radius: 8px;
}

/* Chat Area */
.chat-area {
width: 75%;
padding: 20px;
display: flex;
flex-direction: column;
}

.chat-box {
flex-grow: 1;
overflow-y: auto;
background: #e9e9e9;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
}

.input-area {
display: flex;
gap: 10px;
}

#questionInput {
flex-grow: 1;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}

button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

/* Media Queries */
@media (max-width: 768px) {
.container {
flex-direction: column;
}

.sidebar {
    width: 100%;
    padding: 10px;
}

.chat-area {
    width: 100%;
    padding: 10px;
}

}

@media (max-width: 480px) {
.chat-box {
font-size: 14px;
padding: 5px;
}

#questionInput {
    font-size: 14px;
}

button {
    font-size: 14px;
    padding: 5px 10px;
}

}