Flexbox - Designing with Images and Text

I have a flex container with two elements: an image and a small piece of descriptive text. I want the image to be responsive but not grow beyond a certain height, which is causing a gap when the screen width expands beyond the max height of the image.

Is there a way to make the container item adapt to the image's size so there are no gaps, or to align the image to the left or right side of the screen? I've tried using self-align, but it doesn't seem to be working. I'm looking for a solution to this issue.

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.container>.image {
  flex-grow: 1;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}
<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>

cssflexbox

Answer №1

Preferred Solution

Eliminate

.container > .image {
  flex-grow: 1;
}

Alternative Solution

.image{
  text-align:right;
}

Recommended Solution (This was the desired outcome)

All that was required was the inclusion of flex, setting the direction to column, followed by aligning the items to the right using flex-end

.image{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:1;
}


.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}
<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>

Answer №2

To perfectly align text and images on the sides, utilize the justify-content property:

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

Check out the code on CodePen

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

Having Trouble Aligning Contents in a Row Horizontally using Bootstrap 5

My Images are refusing to align in a horizontal row no matter what I try. Output: https://i.sstatic.net/echGV.png .img-size-square { width: 100%; height: auto; max-width: 400px !important; max-height: 400px !important; } .container-f ...

htmlcssbootstrap-5

The transitionend event fails to trigger upon losing focus

When I attach a transitionend event listener to element using the code below, everything works smoothly: element.addEventListener('transitionend', transitionEnd); function transitionEnd() { console.log('transitionEnd fired') ...

javascripthtmlcss

Ways to swap out an img element with an almost identical gif element while maintaining its precise placement consistently

I am facing an issue in my code where a random element is generated within the body and when clicked, it is replaced with another gif element. I am using offset() to obtain the top and left values of the original image, and then using replaceWith() to swap ...

javascriptjqueryhtmlcssgif

Issue arises when the logo and navigation menu overlap upon zooming in

I'm facing a couple of issues with the menu on my website that I can't seem to resolve. The code appears to be correct, but the problem arises when a user zooms in on the website, particularly on netbooks. The website logo and the navigation menu ...

csshtmloverlap

What could be causing the unexpected behavior of flexbox in Bootstrap?

I am facing a challenge while working on an existing PHP project that requires editing using HTML, bootstrap, and CSS. The flexbox is not behaving as expected, specifically when trying to display two cards in a row. Even though it works in a separate file, ...

cssflexboxbootstrap-5

Problem with Bootstrap container-fluid overlapping with floated element

I am struggling with the layout of my card body, which includes a floating logo and rows enclosed in a container-fluid. While everything looks great in Chrome, I am facing alignment issues in Edge and Firefox. I have considered using absolute positioning ...

cssfirefoxbootstrap-4microsoft-edge

Scrolling with jQuery just got a sleek upgrade with our new

Can anyone suggest a jQuery scrollbar that resembles the clean black bar found on the iPhone? I need a simple design without visible up or down buttons. Many scripts I came across offer more features than necessary for my project. My div element has a fi ...

javascriptjquerycssscrollbar

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...

javascripthtmlcssgetelementbyidclassname

GlideJS is experiencing a flashing issue on the first slide

Is anyone else experiencing a flashing issue when changing slides in the slider periodically? Specifically, the first slide flashes when transitioning from the first to the last slide. This bug seems to be isolated to Chrome only. Interestingly, I've ...

javascripthtmlcsscss-animationsglidejs

ReactJS is having trouble with inline animation styles

After successfully implementing a timer using CSS with animation, everything was working as expected. However, I encountered an issue when trying to convert it into JSX inline styles in React. The animation stopped working as smoothly as before due to the ...

cssreactjsanimationjsx

Is there a way to evenly space out the buttons in the Nav element with more room in between each one?

I need the buttons to be evenly spaced with more room between them. And, of course, they need to be responsive in the end. I attempted to use Bootstrap's "d-flex" class to arrange the buttons, but it didn't work as expected. If you review my Boo ...

javascripthtmlcssbootstrap-5

What are the steps for positioning material-ui icons to the right?

I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...

cssreactjsexpressmaterial-uiweb-development-server

Activate function when list item is clicked

My goal is to execute a function when users click on the li elements in the snippet below without relying solely on onclick. For instance, clicking on the first li element (with a value of 1) should trigger a function where the value "1" is passed as an ar ...

javascriptjquerycss

Why isn't my HTML reflecting the CSS changes I've made?

My CSS code is not applying to the HTML in general, only to h1 and h3. I have used similar looking code before and it worked fine. html { text-align:center; border:25px dotted #ff5c33; background-color:#00b300; color:#ff5c33; font-fami ...

css

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when ...

htmlcsssass

Upon refreshing the page, Vuex encounters an issue where it is unable to read

My website has a Navbar component that utilizes values from the Vuex store. Prior to entering each route, I trigger a dispatch from Vuex as shown below: router.beforeEach((to, from, next) => { //... store.dispatch("updateUserData"); ...

javascripthtmlcsstypescriptvue.js

The Bootstrap 4 Carousel experiences flickering issues during transitions when viewed on Safari browser

After integrating a Bootstrap 4 carousel onto a Drupal platform, I encountered a peculiar issue. The carousel functions smoothly on Chrome, but on Safari, it briefly blinks before transitioning to the next slide (as per the set interval time). Initially, I ...

javascripthtmlcssbootstrap-4

Does the entire window fade before the URL is loaded?

Is it feasible for me to create an effect where, upon a user clicking on a link, the entire window fades out (perhaps with a black div covering it), and then loads an external URL like 'google'? For example: User clicks 'Here', and th ...

javascriptjqueryhtmlcssfade

Learning the ropes of off-canvas design with Bootstrap 3

I'm really struggling to understand how to implement off-canvas functionality in Bootstrap 3. I've searched for examples, but I just can't seem to grasp it. My navigation is set up, but I'm unsure how to make the off-canvas feature work ...

htmlcsscanvastwitter-bootstrap-3

What is the most effective way to toggle the visibility of these rows within a table?

Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...

jqueryhtmlcsshtml-tableshow-hide