How can I adjust the flex spacing based on the width of the window?

My figures are evenly spaced using flex spacing, but when I resize the window, they extend beyond the parent section.

Here is the HTML code snippet:

<section class="features">
    <figure>
        <img src="Images/Vanilla-Cupcakes.jpg" alt="Homemade Vanilla Cupcakes">
        <figcaption>Homemade Cupcakes</figcaption>
    </figure>
    <figure>
        <img src="Images/mini-cinnamon-rolls.jpg" alt="Sweet Cinnamon Rolls">
        <figcaption>Cinnamon Rolls</figcaption>
    </figure>
    <figure>
        <img src="Images/christmas-bread.jpg" alt="Christmas Sweat Bread">
        <figcaption>Christmas Desserts</figcaption>
    </figure>
</section>

And here is the CSS code part:

.features {
    background: bisque;
    color: white;    
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.features figure {
    color: white;
    font-size: 30px;
    text-align: center;
    width: 350px;
}
.features figure img{
    border-radius: 10px;
    width: 350px;
}

Answer №1

Suggestion:

.features { flex-wrap: wrap }

This CSS rule ensures that content will wrap when space is limited.

Answer №2

The text appears oversized in this instance. Consider implementing a responsive font-size or utilizing the word-break CSS property to manage long texts. Additionally, it is advisable to avoid fixed widths within flex items (e.g. 350px).

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

In Laravel, the text-overflow:ellipsis property fails to function properly when trying to display unescaped data

Encountering an issue with the property text-overflow:ellipsis. The ellipsis at the end of the truncated text is not showing up as expected. To maintain formatting without escaping data in ckeditor, I am using: {!! $treatment->description !!} speci ...

Ways to simultaneously apply fade in and fade out effects using CSS

body { background-image: url("background.jpg"); background-attachment: fixed; font-family: 'Roboto', sans-serif; color: #333333; } #container { height: 1000px; } /* HEADER WITH NAVIGATION BAR AND LOGIN OPTION */ #head { position: abso ...

Updating the information displayed in one section by selecting a button on the Google Maps infowindow located in a separate section

My webpage is divided into multiple divisions. One division contains a map using the Google Maps API with markers. When I click on a marker, an info window opens up. Now, I am attempting to place a button inside that info window which, when clicked, will ...

Tips for placing multiple images onto one canvas

I am currently working on a web application that allows users to create sketches, define their positions and sizes, and then save them to a database. In another section of the website, I aim to retrieve these images and display them on a single canvas. To ...

How to toggle two classes simultaneously using JQuery

Check out this code snippet: http://jsfiddle.net/celiostat/NCPv9/ Utilizing the 2 jQuery plugin allows for the following changes to be made: - The background color of the div can be set to gray. - The text color can be changed to red. The issue arises wh ...

Unable to delete data in Laravel 8

I am new to Laravel and facing an issue when trying to delete a row with a modal. The problem is that only the first row is getting removed and I can't figure out the reason. Here is my modal setup: <p class="card-text"><small clas ...

Retrieve all tags that come after a specific <a> tag inside a <td> element using Scrapy

Looking to extract information from this specific webpage using Scrapy: My goal is to retrieve the summaries from the GeneCard, which are structured in HTML as follows: <td> <a name="summaries"></a> <br > <b>Entr ...

Tips for Utilizing Border-Radius in Safari

What is the best way to hide a child element's corners within its parent (#div1) Ensuring that the child does not overflow its parent container? ...

CSS - setting all child elements to the height of the tallest child element

Is there a way to ensure that both fieldsets have the same height as the tallest one? See the code snippet below or visit this link for reference: http://jsfiddle.net/zpcXQ/2/ <div id="parent"> <form> <fieldset id="left"> ...

Harvest information from various files

I have a collection of 278 Html files containing essays written by various students. Each file includes the student's ID, first name, and last name in this format: <p>Student ID: 000000</p> <p>First Name: John</p> <p>Las ...

Scraping Secrets: Unraveling the Art of Procuring User Links

I need assistance with extracting links from the group members' page on Meetup: response.css('.text--ellipsisOneLine::attr(href)').getall() Can you please help me understand why this code is not functioning correctly? This is the HTML stru ...

A guide on altering the color of a badge through programming

I am curious to learn how I can dynamically change the color of a badge in Angular. My goal is to initially set the color of the badge to white, and then if the percVLRiskTotal reaches a specific value, change the color to green as an example. CSS: <sp ...

Allowing users to navigate through a fixed content page using a scrolling menu, all without the need

On my webpage, I have integrated Google Maps. The layout is divided into a menu on the left and content on the right. I am looking to make the left side (menu) scrollable, while the right side (content, which includes the map) remains static without scrol ...

Developing an interactive contact page using bootstrap technology

I am looking for a way to structure my contact page using Bootstrap. https://i.sstatic.net/e3TCu.png If you're interested, the code for this layout can be accessed here: https://codepen.io/MatteCrystal/pen/xxXpLmK <div class="container" ...

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

Positioning an Element on a Web Page in Real-Time

Trying to implement an Emoji picker in my React application, I have two toggle buttons on the page to show the picker. I want it to appear where the Toggle button is clicked - whether at the top or bottom of the page. The challenge is to ensure that the pi ...

Adaptive web layout (Adjusting design based on screen size)

I'm feeling a bit confused about responsive web design. I understand that I can use media queries to apply different stylesheets based on specific screen sizes. For example, a screen at 600px will use one stylesheet while a larger screen will use a co ...

Tips for verifying on the click of a button

Having trouble solving my issue as a newbie to HTML and jQuery. The problem at hand is: In my website, I need to implement username validation. This validation involves checking the entered username against a MySQL database. If the database contains the ...

The element residing within the body exceeds the body's dimensions

HTML : <body> <header> <div> </div> </header> </body> CSS : body { width : 1000px ; } header { width : 100% ; } If these codes are implemented, The header's width should be the same as the body's ...

Cross-browser compatibility issue: Chrome displays image class in HTML CSS, while Firefox does not

I am building a webpage and have encountered an issue with displaying images in different browsers. Specifically, the image appears correctly in Chrome and Safari but doesn't show up in Firefox. By "doesn't show," I mean that the image is not vi ...