Guide on aligning text below an image at the same height through flexbox styling

I am trying to use flexbox to make two images side by side have the same height and align the text under the image. Can anyone assist me with this issue?

Here is the code I am currently using:

 
 .row{
  display:flex;
  }
  .cell img{
      width:150px;
     }
<div class="content">
<div class="row>
<div class="cell">
  <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-589121_1280.jpg"></div>
<p class="project1info">
Featuring allows a user to search a musical artist and view a list of collaborators they have worked with.</p>

<div class="cell">
  <img src="https://hostingstudies.com/wp-content/uploads/2020/10/wordpress-1882120_1280-1.png"></div>
<p class="project1info">
Featuring allows a user to search a musical artist and view a list of collaborators they have worked with.</p>

</div>
</div>

htmlcssflexboxgrid

Answer №1

Instead of specifying height in percentage, you can set it in pixels to get the desired result.

Try this out:

 .wp-block-image img{
     width:100%;
     height:320px;
     object-fit:cover;
  }

Implementing this code will effectively resolve your issue.

Answer №2

To ensure a consistent height for the outer element, set the image height to 100%.

.custom-image{
  width:100%;
  height:400px;
}

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

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

Is it possible to execute our webpack (UI) build directly in a web browser without the need for a server?

Is it possible to run the build file bundle.js directly in the browser when using a reactjs setup with webpack dev server and webpack build? Also, when we deploy the build on the cloud, what exactly happens and how does our application run? ...

javascripthtmlreactjswebpackwebpack-dev-server

I am having trouble getting my media query to function correctly

I am currently troubleshooting an issue with my media query in a project. The media query is set for a screen width of 768px, but it appears to not be working as expected. Interestingly enough, when I resize my screen to 360px, the media query does work. ...

htmlcss

The XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...

cssseleniumxpathrobotframework

Guide to showing specific images alongside text through Ajax and Jquery

Currently, I am faced with the challenge of displaying specific text files using jQuery and Ajax. My goal is to have a text file appear based on the image being displayed. For instance, if an image of an apple is being shown, I would like the text below i ...

javascriptjqueryhtmlajax

Stop the iframe video when the modal is closed

I'm currently developing a website that incorporates the code showcased in this tutorial to launch a modal window featuring an iframe for playing YouTube or Vimeo videos. The issue arises when, as mentioned in the comments on the tutorial page, there ...

javascripthtmlcss

Does the Parent Tag style override the child tag style when hovering?

I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example. .outer:hover { background: yellow; z-index: 1; position: relativ ...

htmlcss

Could it be that the reason why document.getElementById is undefined in a Vue2 component is due to a misunderstanding

I am currently building a simple chat feature that fetches messages from Firebase and displays them in a div. The objective is to automatically scroll to the bottom of the div WHEN relevantMessages changes, as long as the current scroll position is close ...

htmlvue.jsvuejs2

Execute code after the CSS has been loaded, but before the images start downloading

My website is experiencing a challenge. Downloading images is taking too long, with the complete website taking around 20 seconds to fully load on my system. A loader is displayed but only hides once the complete website is loaded (after 20 seconds). Whe ...

javascriptjqueryhtmlcss

Disappearing input field in DateTimePicker Bootstrap when blurred

Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Ultimate Guide to Setting up SVG's Viewbox, Width, and Height for Scalability and Responsiveness

As a beginner in SVG design, I find it challenging to scale, zoom in/out with the container and ensure responsiveness across different devices. I wonder if it's possible to create an SVG that adapts to all device sizes and effectively handles browsin ...

htmlcsssvg

What could be the reason for the dropdown-item not being displayed?

I've encountered an issue with my navigation bar while using Bootstrap 5. The dropdown item (Login) for the user icon is not appearing as expected. Below is the code snippet in question: <button class="btn dropdown-toggle" type="butt ...

htmldropdownbootstrap-5

Customize the Kendo UI appearance using JavaScript

Currently, I am trying to modify the background color of certain controls using JavaScript. While I have figured out how to do this for DropDownList and ComboBox components, I'm facing difficulty with the DatePicker. The frustrating part is that there ...

jquerycsskendo-ui

Getting the outer span text with Selenium WebDriver and Java: A quick guide

Having an issue where I'm having difficulty extracting the text from a span tag that contains another nested span tag: <span class="abc"> <span class="def">Inner Span</span> Outer Span </span> Currently, when ...

htmlseleniumxpathcss-selectorswebdriverwait

LinkedIn's website consistently displays a "1 min read" indicator when sharing articles or

I am currently attempting to remove the '1 min read' text from the description when sharing content on LinkedIn. Example of '1 min read' Although I have added open graph tags to the page and confirmed that they do not contain '1 ...

htmllinkedin-apimetashare-open-graph

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

javascriptcss

The navigation bar overlays the background images

I'm struggling to adjust the positioning of my image so that it doesn't get hidden underneath my navigation bar. I want my background image to stay fixed while text scrolls over it, but I can't seem to figure out the correct height for my im ...

cssimage

Issue with Bootstrap alignment on the right side

Just finished creating my 'navbar' in bootstrap, but I'm having trouble aligning my unordered list to the right. It's staying in the middle no matter what I try. Can someone please help? Feeling really confused... HTML: <div class= ...

javascripthtmlcsstwitter-bootstrap

"Unlocking the Power of jQuery: A Guide to Customizing CSS with Scroll Effects

Many CSS examples include a scrollbar for editing the CSS code. Click here to see an example of the scrollbar I haven't been able to find any instructions on how to do this. Can someone please explain? ...

jquerycss

Eliminate the CSS styling applied to a select element using jQuery

I'm facing an issue where I have multiple CSS styles applied to an input field - one default and others for customization. I want to disable the default CSS without affecting the custom ones. I attempted to remove it using: $j('#teste').css ...

jquerycss