What could be causing my div to overflow its parent div when the screen size is adjusted?

I've been developing my personal portfolio using only pure HTML and CSS, aiming to create a responsive site with media queries. The code below showcases two sections of my portfolio.

The issue I'm facing is with the div class "worked-dash." When resizing the window below the width of the worked-dash section, it overflows outside its parent div instead of adjusting automatically.

Interestingly, the other div, about-dash, behaves perfectly fine. To illustrate this discrepancy, I have provided links to both the working About-dash and the problematic Worked-dash on CodePen. Be sure to change the orientation and resize the viewport to see the difference below 420px.

Screenshot demonstrating the About-dash in action:

https://i.sstatic.net/hgzgi.png

:root {
    --background:#f8f9fa;
    ... (CSS code goes here)
}

/* Responsive Design */
@media (min-width: 320px) and (max-width:420px) {
    html {
        background-color: red; /* Example style changes for smaller screens */
    }
    .sec-about { 
        ... (Responsive styles for About section)
    }
}

Screenshot illustrating the issue with the Worked-dash section:

https://i.sstatic.net/UefHH.png

:root {
    --background:#f8f9fa;
    ... (CSS code goes here)
}

/* Responsive Design */
@media (min-width: 320px) and (max-width:420px) {
    html {
        background-color:red; /* Example style changes for smaller screens */
    }
    .sec-worked {
        ... (Responsive styles for Worked section)
    }
}

Your advice or assistance on resolving this matter would be greatly appreciated!

Answer №1

My solution involved turning the .container-worked into a flex box container with a width set to 90% of the screen width, creating a gap on the right side. I utilized align-items: center for easy vertical alignment without the need for relative positioning. Additionally, I used flex-grow on the worked-dash element to ensure it always fills the parent div's width.

This design adapts well to smaller screen sizes without requiring media queries. Feel free to leave a comment if this isn't what you were looking for.

:root {
  --sec-worked-background-color: #003772;
  --anchor-accents: #3083dc;
  --title-color: #ffffff;
  --title-background: #3083dc;
  --title-accent: #0051a8;
  --JetBrains: "JetBrains Mono", monospace;
  --Roboto: "Roboto", sans-serif;
}

/*Normalization*/
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* moved this from html rule so it applies on all elements */
}

body {
  background-color: #f8f9fa;
}

.sec-worked {
  background-color: var(--sec-worked-background-color);
  display: flex;
  align-items: center; /* put the element in the center of the div vertically */
  height: 103vh;
}

.container-worked {
  width:90%; /* Set this at 90% so there's a gap on the RHS of the container */
  gap: 1rem; /* put a gap between each element */
  display: flex;
  align-items: center; /* this means we can vertically align the worked-dash element in the worked-title div. */
}

.worked-title {
  font-family: var(--Roboto);
  background-color: var(--title-background);
  color: var(--title-color);
  padding: 10px 5px;
  box-shadow: 7px 7px var(--title-accent);
  font-size: 2em;
}

.worked-dash {
  height: 5px;
  flex-grow:1; /* added this so that this element always expands to fill the width of the parent div */
  background-color: var(--anchor-accents);
}
<main>
  <section class="sec-worked">
    <div class="container-worked">
      <h2 class="worked-title">Where I've worked</h2>
      <div class="worked-dash"></div>
    </div>
  </section>
</main>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What does the term "SPCLICK" signify within an email template?

Recently, I found an email template sample that includes button links with the attribute xt="SPCLICK". Could someone please clarify what this means? Thank you! ...

Hover over the image to reveal sliding text

I am attempting to incorporate a CSS3 hover effect into my images, where hovering over an image will cause some text to slide up on a white background. However, I have encountered issues with conflicting code, as I also have overlay text and a 'new&ap ...

Background header image cropped

I'm struggling to display the complete information I need on an image that I want to set as my background. Could anyone assist me in determining the correct dimensions and size? Thank you in advance for your help. #hero { width: 100%; heig ...

What are the steps to create a CSS3 blur effect within a parent container?

Is it possible to create an inner-blur effect using css3 without ignoring the parent container dimensions and causing overflow? Any tips or tricks on achieving this? html <div class="box"> <div class="blur"> <img src="..." ...

Is there a way to modify the text of image URLs using JavaScript?

My method of replacing a specific word in text works like this: document.body.innerHTML = document.body.innerHTML.replace(/katt/g, "smurf"); However, when I try to replace an image URL in HTML using the same line of code, it doesn't seem to work. H ...

When a PHP-generated child element is clicked, jQuery fails to detect it

I'm currently developing a website where I need to dynamically display buttons based on database content. These buttons, when clicked, should send a request to the database and update the page content accordingly. My approach involves using Ajax and ...

I am experiencing issues with my button not responding when I click on the top few pixels

I've created a StackBlitz version to illustrate the issue I'm facing. It seems like the problem might be related to my CSS for buttons... Essentially, when you click on the button at the very top few pixels, it doesn't register the click an ...

What is the best method to deallocate and remove the background-color property of CSS once it has been defined?

There is a perplexing issue that I am unable to resolve. The "Shop" section on this page has an intriguing translucent blue-green background: This background is set using the ID "#left-area". Interestingly, on another page, which can be found at , the sam ...

issue with jQuery not properly selecting options based on text

I have three select elements in my code, each containing 3 or 4 options. An "Apply All" button is placed on the first file row. When a user selects a sheet name on the first file and clicks the Apply All button, it should automatically select the same she ...

Disappearing text editor content in React Js

I have created a basic accordion feature with a text editor inside each accordion. Accordion.js <div className="wrapper"> {accordionData.map((item, index) => ( <Accordion> <Heading> <div styl ...

The result of calling addEventListener is undefined

My issue lies with the addEventListener function, as it is not working correctly. I've created a function that requires an event listener to track scrolling and then execute a callback function. window.addEventListener("scroll", checkPosition); Unf ...

Advancing to the subsequent page during the scraping process

Transitioning to the following page during web scraping and adjusting the date format url_list contains a compilation of URLs, one of which is I have noticed that there is an href code to navigate to various years and pages, but I am encountering difficu ...

I have decided to forego the method I initially wanted to use

click here for image description I am using a method that is successfully performing its function, as I can see the URL in the console output. However, I am puzzled by why the method name appears scratched out. Despite this visual cue, the method is funct ...

I am searching for a resource that can provide me with information on how to access all properties

I'm currently studying JavaScript and have a function with an event (e) as a parameter. I am able to access the target using e.target, but now I want to explore all the various style attributes in e.target.style on the MDN page. However, I have been u ...

The Link Element Does Not Appear Properly When Styled Using nth-of-type Selector

https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js Can anyone help me understand why the fourth .content <Link/> is not displaying when using the given CSS styling? Could it be a bug in the code, or am I overlooking something important? ...

How do I make an element stay in place between two other elements?

Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...

Issues with centering background-position while using clip-path functionality

Struggling to center a background image? I initially suspected conflicting CSS rules, so I created a simplified demo to troubleshoot. After reviewing examples on SO and beyond, it seems like my approach is correct. Can anyone help identify what I might be ...

Ways to eliminate space between column arrangement in Bootstrap

I've designed 3 cards containing 2 widgets each in the sidebar. To ensure responsiveness, I utilized bootstrap 4 column ordering. One problem is when the right column is larger than the left one in a row of 2 columns, there's an awkward space be ...

Creating Dynamic Buttons in Laravel with AJAX and jQuery

Hello, I need help creating dynamic buttons as I am not familiar with ajax or jquery. I currently have a dynamic button running, but I want to create another dynamic button after I add another form. Here is my code. Please take a look at my image, as I am ...

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...