Tips for keeping an absolute element aligned within a flex-parent that is constantly changing

Question

Tips for keeping an absolute element aligned within a flex-parent that is constantly changing

I'm facing an issue with banners overlapping images inside a flex-box. When the flex direction is set to row, everything aligns perfectly based on CSS. However, switching to column orientation causes them to stack at the top and cover one another.

<html>
    <div class="locations">
        <div class="location">
            <img src="resources/images/norbert-toth-I1oL89qxefc-unsplash.jpg" />
            <div class="location-container>
                <h2>Herring Bone Library</h2>
                <p>141 Address St. <br>Detroit, MI <br>49449</p>
            </div>
        </div>
        <div class="location ">
            <img src="resources/images/kristen-colada-adams-wpCJlKxCNRA-unsplash.jpg" />
            <div class="location-container">
                <h2>Sunrise Botanical <br>(Downstairs)</h2>
                <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
            </div>
        </div>
        <div class="location">
            <img src="resources/images/daria-volkova-_IhXaHmTJr8-unsplash.jpg" />
            <div class="location-container">
                <h2>Black Cat Coffee</h2>
                <p>686 My Mind <br>Detroit, MI <br> 49448</p>
            </div>
        </div>
    </div>
</html>

The location-container banners don't adjust with the flex-box even with additional CSS styling. They overlap only within the main parent container.

Here's how they are styled:

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: absolute;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
    }
}

As the webpage width hits 1200px, the flex-box switches to a column layout while maintaining the positions of text containers.

Any suggestions on keeping the banners aligned properly within flexing parent containers?

html css flexbox absolute

Answer 1

Answer №1

When your media reaches 1200px, it's important to make a change in the CSS code. Instead of using position:absolute, switch the location-container class to relative. Additionally, ensure each location-container has a set min-width for consistency.

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: relative;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
        min-width:300px;
    }
}

<div class="locations">
    <div class="location">
        <div class="location-container">
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
    </div>
    <div class="location">
        <div class="location-container">
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>
    <div class="location">
        <div class="location-container">
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>

Answer 2

When your media reaches 1200px, it's important to make a change in the CSS code. Instead of using position:absolute, switch the location-container class to relative. Additionally, ensure each location-container has a set min-width for consistency.

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: relative;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
        min-width:300px;
    }
}

<div class="locations">
    <div class="location">
        <div class="location-container">
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
    </div>
    <div class="location">
        <div class="location-container">
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>
    <div class="location">
        <div class="location-container">
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>

Answer 3

Answer №2

It appears that there is a minor issue in the original code - the first

<div class="location-container>

is missing a closing " in the class attribute, which could potentially cause some problems (already fixed in the snippet).

You have set the location-container to be absolutely positioned relative to .locations, but it should actually be relative to .location without the plural "s".

Here's what you need to do:

Remove position: relative from .locations
Add .location { position: relative } to your CSS file

Once you make these changes, everything should work correctly.

By the way, I didn't address any potential overflow issues with .location, but I did add some random images to demonstrate the effect.

UPDATE: Upon further inspection of your code, I noticed that all properties for

.locations { flex-direction: column }

are different. You only need to define properties once and override them as needed inside media queries.

A general rule to follow:

Define all properties outside media queries that remain consistent across devices.
Inside media queries, only change or add properties that need adjusting. In this case, only adjust flex-direction.

I have made the necessary adjustments to the snippet...

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;

/*    position: relative; /* REMOVE */
}

/* ADD */
.location {
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
}

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        flex-direction: column;
   }
}

<div class="locations">

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=1">
        <div class="location-container">
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
   </div>

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=2">
        <div class="location-container">
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=3">
        <div class="location-container">
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>

Answer 4

It appears that there is a minor issue in the original code - the first

<div class="location-container>

is missing a closing " in the class attribute, which could potentially cause some problems (already fixed in the snippet).

You have set the location-container to be absolutely positioned relative to .locations, but it should actually be relative to .location without the plural "s".

Here's what you need to do:

Remove position: relative from .locations
Add .location { position: relative } to your CSS file

Once you make these changes, everything should work correctly.

By the way, I didn't address any potential overflow issues with .location, but I did add some random images to demonstrate the effect.

UPDATE: Upon further inspection of your code, I noticed that all properties for

.locations { flex-direction: column }

are different. You only need to define properties once and override them as needed inside media queries.

A general rule to follow:

Define all properties outside media queries that remain consistent across devices.
Inside media queries, only change or add properties that need adjusting. In this case, only adjust flex-direction.

I have made the necessary adjustments to the snippet...

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;

/*    position: relative; /* REMOVE */
}

/* ADD */
.location {
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
}

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        flex-direction: column;
   }
}

<div class="locations">

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=1">
        <div class="location-container">
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
   </div>

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=2">
        <div class="location-container">
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=3">
        <div class="location-container">
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>

Tips for keeping an absolute element aligned within a flex-parent that is constantly changing

Answer №1

Answer №2

Similar questions

Adjusting the image width and height dynamically based on the parent container dimensions using CSS and HTML

Card flipping functionality is not functional on Internet Explorer browsers (versions 11, 10, and below)

Adjust the column width dynamically in an Ionic framework

Tips for retrieving the file name from the <input type="file" tag within a JSP page

Tips for arranging two jumbotrons with proper spacing in Bootstrap without stacking them vertically while using the mr-1 class

I recently encountered a minor CSS issue while working on a simple program. I created a div element with two span elements nested underneath it, and I wanted to utilize flexbox to style them

When you click on links and buttons, a focus outline appears

Can you explain the connection between CSS and WebKit?

Problem: NgFor is failing to render the data

Display or conceal a field based on the content of another field using jQuery

jQuery template does not respond to input text when a click event is enabled on an iPhone device

Stop the removal of the CSS content property

The CSS for the page is failing to load due to a basic HTML and JavaScript file

Centering an Unordered List within a Div Container with a Colored Background Box

Struggling to achieve success in redirecting with passport for Facebook

Angular 1.5 - Component for fetching HTML content with dynamic data

Experiencing inconsistencies with CSS on certain devices?

What is the best way to apply box shadow to a particular region using CSS?

Cursor customized image vanishes upon clicking anywhere on the page on a MAC in various web browsers

Customize your header and footer for printing to display on each page