Is there a way to ensure that the text is positioned below the image with flexbox?

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

Is there a way to make the text fall underneath the image? I am familiar with using display: inline-block and float:left or float:right, but I am new to using flexbox. Can someone with more expertise help me solve this issue?

big-row {
  display: flex;
  margin-top: 20px;
}

.head-text {
  font-size: 1.5em;
  line-height: 29px;
}

.p-text {
  font-size: 1.25em;
  line-height: 29px;
  margin: 2px;
}

.big-text {
  text-align: left;
  justify-content: flex-start;
  margin-right: auto;
  padding-left: 40px;
  width: 50%;
  color: #888;
}

.big-img {
  padding-right: 50px;
  justify-content: flex-end;
  opacity: 0.8;
}

.big-img img {
  border-radius: 20px;
}
<div class="big-row">
  <div class="wow fadeInLeft big-text">
    <h1 class="head-text"> All Services </h1>
    <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet luctus nunc, sed ornare velit accumsan id. Cras sit amet justo et velit bibendum elementum ac vel odio. Fusce tortor risus, rhoncus in ultricies ut, rutrum id leo. Pellentesque
      sed venenatis ipsum. Quisque at lacus eu tortor vehicula vestibulum. Aliquam scelerisque tempor elit eu venenatis. In convallis diam quis varius blandit. Vestibulum consectetur ullamcorper urna vel sagittis. Sed malesuada tortor metus, ut porttitor
      odio tristique vel.</p>
  </div>
  <div class="wow pulse big-img">
    <img src="/assets/image/hello.jpg">
  </div>
</div>

htmlcss

Answer №1

To achieve the desired layout, place the image container before the text container in the DOM and apply float: right:

.big-row {
  margin-top: 20px;
  line-height: 29px;
}
.big-row, .big-row > * {
  box-sizing: border-box;
}

.head-text {
  font-size: 1.5em;
}

.p-text {
  font-size: 1.25em;
  line-height: 29px;
  margin: 2px;
}

.big-text {
  padding-left: 40px;
  width: calc(100% - 40px);
  color: #888;
  text-align: justify;
}

.big-img {
  padding-right: 50px;
  width: calc(50% + 80px);
  padding: 0 40px;
  float: right;
  opacity: 0.8;
}

.big-img img {
  border-radius: 20px;
  width: 100%;
  height: auto;
}
<div class="big-row">
  <div class="wow pulse big-img">
    <img src="http://via.placeholder.com/640x360">
  </div>
  <div class="wow fadeInLeft big-text">
    <h1 class="head-text"> Alla tjänster </h1>
    <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet luctus nunc, sed ornare velit accumsan id. Cras sit amet justo et velit bibendum elementum ac vel odio. Fusce tortor risus, rhoncus in ultricies ut, rutrum id leo. Pellentesque
      sed venenatis ipsum. Quisque at lacus eu tortor vehicula vestibulum. Aliquam scelerisque tempor elit eu venenatis. In convallis diam quis varius blandit. Vestibulum consectetur ullamcorper urna vel sagittis. Sed malesuada tortor metus, ut porttitor
      odio tristique vel.</p>
  </div>

</div>

Note that using flexbox won't give you the same effect. Floating is essential in CSS Box Model Module.

Answer №2

Here is a code snippet for you to utilize.

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<!-- Include the latest version of CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Load the newest JavaScript library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="big-row">
<div class="container">
<div class="row">
<div class="col-md-12">
 <div class="wow pulse big-img">
    <img src="asset.PNG">
  </div>
  </div>
  <div class="col-md-12">
  <div class="wow fadeInLeft big-text">
    <h1 class="head-text"> All Services </h1>
    <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet luctus nunc, sed ornare velit accumsan id. Cras sit amet justo et velit bibendum elementum ac vel odio. Fusce tortor risus, rhoncus in ultricies ut, rutrum id leo. Pellentesque
      sed venenatis ipsum. Quisque at lacus eu tortor vehicula vestibulum. Aliquam scelerisque tempor elit eu venenatis. In convallis diam quis varius blandit. Vestibulum consectetur ullamcorper urna vel sagittis. Sed malesuada tortor metus, ut porttitor
      odio tristique vel.</p>
  </div></div>
 </div></div>
</div>
</body>
</html>

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

Building an easy-to-use jQuery task list

I'm currently working on a basic to-do list in Javascript, but I've encountered an issue. When I check the checkbox, the style of the adjacent text doesn't change as expected. Instead, it's the heading text that is affected by the chang ...

javascriptjqueryhtmlcss

Modify CSS progress circle to update the percentage of completion

I stumbled upon this code snippet, and although it works flawlessly, I encountered a limitation - I can only set the percentage to 25, 50, or 75. If I try to increase it to 85%, the circle fills up completely. Does anyone have any suggestions on how to res ...

htmlcss

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

javascripthtmlcss

Removing margins in Bootstrap 5: A step-by-step guide

Currently facing an issue with removing margins in bootstrap. I am looking to set up two graphics that indicate the under construction status of the page - one for desktop and one for mobile devices. This is what I have tried so far: <!DOCTYPE html> ...

cssbackgroundbootstrap-5paddingmargin

Semantic UI dropdown field not displaying selected option text

I've encountered an issue while working with React Semantic UI. I'm trying to render a dropdown and have configured it so that the selected option's text should display in the field. However, when I choose an option from the dropdown, instea ...

javascripthtmlcssreactjstsx

JavaScript issue: Submitting form does not trigger the associated function

I am currently in the process of learning JavaScript as part of my university course, and I have encountered an issue where my function is not being called. I am seeking to gain a better understanding of why this problem is occurring. Summary The situati ...

javascripthtmlforms

Issue with Editing the Layout of a Recently Created Page in Django CMS

I am brand new to the world of Django CMS and currently facing an issue that has me stuck. After adding a new module to an existing Django project and creating a new HTML page, I encountered a challenge with the templates configuration in settings.py. TEM ...

pythonhtmldjangodjango-templatesdjango-cms

Place the image on the canvas

I currently have a canvas where I am able to add text layers and images from flickr. My goal is to enable users to upload an image to the canvas using the html input. For uploading images from flickr, I am using this code: $(".search form.image-search"). ...

javascripthtmlcanvashtml5-canvas

Is it feasible to obtain multiple tag-name indexes using JavaScript?

Exploring the table search function provided by W3Schools has brought up an interesting question in my mind. Is it feasible to simultaneously retrieve multiple indexes using getElementsByTagName and conduct a search across the entire table instead of just ...

javascripthtmlcsshtml-table

The vertical navigation sub-menu is designed to overlap the div container for a

I'm having an issue with my sidepanel vertical navigation where sub-menus are not being displayed properly due to a div container. The width of the div container [side-panel-links] is causing the sub-menus and children of the sub-menus to be cut off. ...

jqueryhtmlcss

KnockoutJS's data binding feature is failing to display any content within the table rows

My JavaScript function creates a model and applies it to an HTML document using knockoutJS. In the HTML file, I have two different ways of displaying the same data: 1- A select list (which is working fine) 2- A table (not showing the same data) I need a ...

javascripthtmlknockout.jskendo-mvvm

Retrieve a particular HTML element from an object that has been mapped

After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...

javascripthtmlcssreactjs

Determining the position of p5.js input in relation to the canvas

Show me what you’ve got: function initialize() { var board = createCanvas(960,540); board.parent("drawingPad"); background('white'); var textbox = createInput(); textbox.position(10,10); textbox.parent("drawingPad"); } I’ve cre ...

javascripthtmlcsscanvasp5.js

Leveraging JSON for fetching distinct identifiers from a database

When a user hovers over a parent span containing an empty img tag, I use JSON and jQuery to retrieve the src of the image from the database. The issue arises when the retrieved src is applied to all looped span images on the same page, instead of each imag ...

javascriptjqueryhtmljson

Exporting a table filled with data from a MySQL database to an Excel spreadsheet

Querying a MySQL database to display data in a table has been successful. Currently, it is set up to show results within a specific date range. Now, the goal is to add a button to the table that allows users to export the data to an Excel file. Previously ...

phphtmlmysqlexport-to-excel

"Creating Sleek Separation with CSS Horizontal Rule

When implementing Google Friend Connect on my website, I noticed a small line appearing on the right sidebar. How can I remove this line as it is causing unwanted visual clutter? ...

csslinegoogle-friend-connecthorizontal-line

The issue with the input:focus not functioning properly has been observed specifically in Firefox

After verifying that my style is being successfully loaded, I have the following code implemented: input:focus { outline: none; } :focus { outline: none; } The purpose of this code was to eliminate the dotted rectangle that appears when clicking on objec ...

cssfirefoxinput

Errors in Animation in Bootstrap Carousel Implementation - slides fail to smoothly transition on and off the screen

It appears that when the slideshow transitions to the next slide or image, it loads partway across the screen instead of smoothly displacing the previous slide. I have attempted the following troubleshooting steps: Eliminating any special classes applied ...

jqueryhtmltwitter-bootstrapcarousel

How can one effectively locate a specific element in an HTML document?

Using Beautiful Soup 4, I have successfully written code that scrapes online data from a webpage. My current challenge involves extracting data from a table, specifically targeting the 4th row. Is there a way to pass an argument to the .find() method to sk ...

pythonhtmlbeautifulsoup

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

phphtmltemplatescss