Responsiveness issues? #405

Feuerhamster · 2023-09-18T22:43:33Z

Feuerhamster
Sep 18, 2023

I have some issues with responsiveness. On some screen sizes, like my laptop or an IPad, there is a vertical scrollbar visible.

My Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"]</title>
  <link rel="stylesheet" href="~/css/pico.min.css" />
  <link rel="stylesheet" href="~/css/theme.css" />
</head>

<body>
  <main class="container">
    <article>
      <header class="group">
        <img src="~/img/logo.png" height="120" width="120" />
        <hgroup>
          <h1>User Login</h1>
          <h2>Application description</h2>
        </hgroup>
      </header>

      <form>
        <input placeholder="Username" />
        <input placeholder="Password" type="password" />
        <button type="submit">
          Login
        </button>
      </form>
    </article>
  </main>
</body>

</html>

I do not customize any spacing, only colors.

Is this a bug in picocss or am I doing something wrong?

Sabirism · 2023-09-24T06:14:27Z

Sabirism
Sep 24, 2023

Where is It's CSS file? There is a problem with CSS, but HTML seems to be right!

0 replies

kamranlatifch · 2023-09-26T14:19:06Z

kamranlatifch
Sep 26, 2023

please provide css file, or add following code in your css file that you are importing in this html page and check.

.container{
overflow-y: hidden;
}

0 replies

Feuerhamster · 2023-09-27T19:34:01Z

Feuerhamster
Sep 27, 2023
Author

Here is my CSS in the project.

@font-face {
	font-family: "Atkinson";
	src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2");
}

@font-face {
	font-family: "Atkinson";
	src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2");
	font-weight: bold;
}

body {
	font-family: "Atkinson", sans-serif;
	--font-family: "Atkinson", sans-serif;
	--primary: #ed6840;
	--primary-hover: #f87857;
	--primary-focus: #f57a5c40!important;
	--primary-inverse: #FFF;

	--form-element-active-border-color: var(--primary);
	--form-element-focus-color: var(--primary-focus);
	--switch-color: var(--primary-inverse);
	--switch-checked-background-color: var(--primary);
}

img {
	border-radius: var(--border-radius);
}

.group {
	display: flex;
	align-items: center;
	gap: var(--spacing);
}

Other than that there is no other custom css added.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsiveness issues? #405

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Responsiveness issues? #405

Feuerhamster Sep 18, 2023

Replies: 3 comments

Sabirism Sep 24, 2023

kamranlatifch Sep 26, 2023

Feuerhamster Sep 27, 2023 Author

Feuerhamster
Sep 18, 2023

Sabirism
Sep 24, 2023

kamranlatifch
Sep 26, 2023

Feuerhamster
Sep 27, 2023
Author