Abc Posts - Answer Overflow

Abc

•Created by Abc on 9/7/2024 in #front-end

Issue with Thin Gray Border Appearing on Button Hover

Hello everyone, I’m experiencing an issue where a very thin gray border appears around a button when I hover over it. The button itself does not have any border set, so I’m unsure why this is happening. Can anyone help me figure out what might be causing this? Here you can see, what I mean: https://ibb.co/hCB12Vj My Code, where I can't reproduce the issue: https://jsfiddle.net/0dnkuoL2/8/ Thank you very much.

3 replies

KPCKevin Powell - Community

•Created by Abc on 9/6/2024 in #front-end

How to Make Font Size,Margin,Line-Height and Letter-Spacing Responsive for <p> and <h1-h6> Elements?

I want to create responsive styles for the following properties: font-size, margin-bottom, line-height, and letter-spacing for both <p> and all heading elements <h1-h6>. Are there formulas or best practices for these properties so that they look good across both very small and very large screens? Looking for guidelines or CSS solutions to handle these style properties in a way that ensures readability and good spacing on different screen sizes.

30 replies

KPCKevin Powell - Community

•Created by Abc on 9/5/2024 in #front-end

How to make image slider skip intermediate steps when jumping between slides?

Hello everyone, I have implemented an image slider in my Angular application, and it is working fine. However, I would like to modify its behavior when jumping directly between non-adjacent slides using the round navigation buttons below the slider. Currently, when I move from one image to another (e.g., from the 4th image to the 2nd image), the slider shows all intermediate images as it transitions. I would like the slider to skip these intermediate steps and smoothly glide directly from the current image to the target image, displaying only the two images involved in the transition (the starting and ending images). What is a way to implement this? Thank you for your help Here is a working Stackblitz Demo: https://stackblitz.com/edit/stackblitz-starters-5jhdvj?file=src%2Fmain.ts

1 replies

KPCKevin Powell - Community

•Created by Abc on 9/4/2024 in #front-end

Add a Scrollbar to a Container When Content Exceeds 100% Height Without Setting a Fixed Height?

Hello everyone, I'm working on a responsive layout where I want the .status container to have a scrollbar if its content exceeds the available space. However, I don't want to set a fixed height for the .status container since the layout needs to be flexible and responsive. I'm looking for a solution primarily using HTML and CSS, but I'm open to JavaScript, TypeScript, or Angular solutions if necessary. In this example, each .status container should display a scrollbar if the content exceeds the available height. However, I'm not sure how to achieve this without setting a fixed height. Is there a way to make the .status container handle overflow correctly in this scenario? Here is the code I'm working with: https://jsfiddle.net/nLo0vzgk/7/ In this example, each .status container should display a scrollbar if the content exceeds the available height. However, I'm not sure how to achieve this without setting a fixed height. Is there a way to make the .status container handle overflow correctly in this scenario? Any advice or solutions would be greatly appreciated!

9 replies

KPCKevin Powell - Community

•Created by Abc on 8/23/2024 in #front-end

How to Center Navigation Content and Ensure Background Stretches Full Width on Large Screens?

Hello everyone, I'm trying to optimize my website's navigation bar for large screens, and I'm facing two issues: 1. The content inside the navigation bar is not centered when the screen width exceeds 800px. 2. The background color of the navigation bar doesn't stretch across the full width of the screen; it stops at 800px. How can I modify my CSS to ensure the content inside the .max-width container is centered within the 800px limit. Secondly make the background color of the navigation bar extend across the entire width of the screen, while keeping the content centered? Thank you very much. Here is my code: https://jsfiddle.net/10moqsLn/20/

<nav class="max-width">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <div>
        <span>Light | Dark</span>
    </div>
</nav>

<nav class="max-width">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <div>
        <span>Light | Dark</span>
    </div>
</nav>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
}

.max-width {
    max-width: 800px;
    margin: 0 auto;
}

nav {
    background-color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

nav ul li a:hover {
    background-color: #555;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
}

.max-width {
    max-width: 800px;
    margin: 0 auto;
}

nav {
    background-color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

nav ul li a:hover {
    background-color: #555;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

3 replies

KPCKevin Powell - Community

•Created by Abc on 8/13/2024 in #front-end

How to Vertically Center Logo and Icons with Respect to the First Row in Footer?

I'm working on a footer layout and I'm having trouble aligning the elements as I want them. I need the "Logo" and the icons in the "icon-container" to be vertically centered with respect to the first line of text in the "text-container", not with respect to both lines of text. Additionally, the "Imprint" text should remain horizontally centered with respect to "A long long text". Here's the relevant HTML and CSS code: https://jsfiddle.net/vqL23zu4/9/

html, body {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;

  p {
    margin: 0;
  }
}

div.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}

.icon-container {
  display: flex;
  column-gap: 5px;
}

<footer>
  <div class="row">
    <p>Logo</p>
    <div class="text-container">
      <p>A long long text</p>
      <p>Imprint</p>
    </div>
    <div class="icon-container">
      <p>Icon 1</p>
      <p>Icon 2</p>
      <p>Icon 3</p>
    </div>
  </div>
</footer>

I want the "Logo" and the icons to be vertically centered with the first line of text ("A long long text") and not with the second line of text ("Imprint"). Also, "Imprint" should stay horizontally centered with "A long long text". How can I achieve this layout?

5 replies

KPCKevin Powell - Community

•Created by Abc on 8/12/2024 in #front-end

Why is the autofill text color not white in my form input?

I have created an HTML form and I am trying to set the text color of autofilled inputs to white. However, it doesn't seem to be working as expected. Here is my code: https://jsfiddle.net/76crfwjv/1/

input:-webkit-autofill {
  background-color: #000 !important;
  color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  box-shadow: 0 0 0px 1000px #000 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

<form action="/submit-form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name" required>
        <button type="submit">Submit</button>
    </form>

Despite setting the color to white using color: #fff !important;, the autofill text remains black. How can I ensure that the autofill text color is white? Are there any known issues or additional CSS rules I need to apply to fix this?

6 replies

KPCKevin Powell - Community

•Created by Abc on 8/8/2024 in #front-end

How to vertically center a horizontal line to the first line of a multiline paragraph using CSS?

I have a layout where I need to position a horizontal line next to a multiline paragraph. The line should be vertically centered to the first line of the paragraph, not to the entire paragraph. How can I adjust the CSS to achieve this alignment? Here is the HTML and CSS code I have so far: https://jsfiddle.net/pmcdq1hr/1/

<p class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<p class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.text {
  //padding-left: 70px;
}
.text:first-of-type {
  background:
    linear-gradient(red 0 0) no-repeat
    0 calc(.5lh - 1px)/50px 2px;
}
p {
  margin: 0 0 20px;
  font-size: 20px;
}

9 replies

KPCKevin Powell - Community

•Created by Abc on 8/2/2024 in #front-end

CSS Media Queries and Responsive Font Sizes Not Working as Expected

I'm having trouble with making my text responsive and applying media query rules correctly. The media query rules for changing the background color of the body element do not seem to be applied. The font sizes for h1 and p elements do not appear to be responsive as expected. Any help or suggestions would be greatly appreciated! Here is my code: https://jsfiddle.net/3sjboL14/3/

1 replies

KPCKevin Powell - Community

•Created by Abc on 7/31/2024 in #front-end

How can I ensure that the container is at least as wide as the longest text?

I have a navigation dropdown menu within a container. The HTML and CSS code provided is meant to display a language dropdown menu. However, I'm experiencing issues where the container's width doesn't adjust according to the length of the longest text inside it. I want to ensure that the container is always at least as wide as the longest text and that the entire text is visible. How can I achieve this with the given code?
Here is the code: https://jsfiddle.net/rn8z6swk/1/

7 replies

KPCKevin Powell - Community

•Created by Abc on 7/31/2024 in #front-end

border-radius not applying to container element

I'm having trouble with applying border-radius to a container element in my CSS. Despite setting the border-radius property, it doesn't seem to be taking effect. Here's my code: https://jsfiddle.net/6w3a9sv0/1/

7 replies

KPCKevin Powell - Community

•Created by Abc on 7/29/2024 in #front-end

How to Make Full-Width Items in a Container with Padding in CSS?

I'm trying to create a layout where blue and green rectangles (background-color) take the full width of the screen while the text should keeping a padding inside the container. Here is my HTML and CSS code: https://jsfiddle.net/6hyo07mb/1/ The problem is that the rectangles elements are not taking the full width of the container because of the padding. How can I make these items take the full width of the screen while keeping the container's padding?

<div class="container">
  <div class="item">Section 1</div>
  <div class="item">Section 2</div>
  <div class="item">Section 3</div>
  <div class="item">Section 4</div>
  <div class="item">Section 5</div>
</div>

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  background-color: red;
  width: 100%;
  height: 100%;
  padding: 0 20px;
}

.item {
  width: 100%;
  height: 20%;
}

.item:nth-child(odd) {
  background-color: blue;
}

.item:nth-child(even) {
  background-color: green;
}

9 replies

KPCKevin Powell - Community

•Created by Abc on 7/25/2024 in #front-end

Portfolio Website

I'm currently working on creating a portfolio website to showcase my projects and was wondering if you know of any good portfolio websites that I can use as inspiration. Any recommendations would be greatly appreciated!

3 replies

Gaming

Programming