Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7a76f7e4e3b203e203c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div className="brand_story_body w-75 d-flex m-auto justify-content-between">

                           <div className="brand_story_description text-start">
                             
                                           <div className="w-50">
                                           <img className="mw-100 mh-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png"/>
                                           </div>
                                      
                                           <div className="w-50">
                                           <p>
Looking for ways to create mobile-optimized videos quickly? Even if you're not a designer, our tool can help your team produce high-quality videos that can be easily customized. Start boosting your brand's success today by learning how to create mobile-optimized videos in minutes.
                                            </p>
                              <button className="py-1 see-more-btn bg-primary border-3 border border-secondary fw-bold px-4">
                                SEE MORE
                             </button>
                                           </div>
                             
                               
                              
                           </div>
                        </div>

Answer №1

Give this a try and see if it makes a difference

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c7d9c5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="brand_story_body w-75 d-flex m-auto justify-content-between">

<div class="container-md mt-3">
  <div class="row">
    <div class="col-6 p-0 m-0  border">
      <div class="w-100" style="overflow: hidden; width: 100%; height: 100%">
        <img class="w-100 h-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
      </div>
    </div>
    <div class="col-6 border p-3">
      <p>Tips on quickly creating mobile-friendly videos without being a designer. Each team can produce numerous videos that are easily editable. Initiate your brand's success with these steps. Learn how to craft optimized videos for mobile use in no time</p>
      <button class="btn btn-outline-dark w-50">
          SEE MORE
       </button>
    </div>
  </div>
</div>
<br><br><br>

Answer №2

To achieve the desired layout, one can utilize either Flexbox or Grid. In this particular case, Flexbox was employed for demonstration purposes. For a detailed explanation on Flexbox, refer to this resource

.brand_story_description {
  display: flex;
  flex-wrap: wrap;
}

.brand_story_description .w-50 {
  flex: 0 1 50%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130d130f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="brand_story_body w-75 d-flex m-auto justify-content-between">

  <div class="brand_story_description text-start">

    <div class="w-50">
      <img class="mw-100 mh-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
    </div>

    <div class="w-50">
      <p>
        How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes
      </p>
      <button class="py-1 see-more-btn bg-primary border-3 border border-secondary fw-bold px-4">
                                SEE MORE
                             </button>
    </div>

  </div>
</div>

Answer №3

Check out this functioning demo:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e3f8fff8feedfcccb9a2bca2be">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="brand_story_body">
  <div class="brand_story_description">
    <div class="row">
      <div class="col">
        <img class="img-responsive w-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
      </div>
      <div class="col col d-flex flex-column justify-content-center">
        <p>Learn how to easily make mobile-friendly videos in just minutes - no design skills needed! Many teams are already creating numerous videos and trimming them for optimal impact. Take the first step towards your brand's triumph today. Discover how to produce mobile-friendly videos effortlessly.</p>
        <button class="btn btn-outline-dark rounded-0 border-3 w-25">
          EXPLORE MORE
        </button>
      </div>
    </div>
  </div>
</div>

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

How can one effectively manage a dynamic web element ID and xpath as they evolve?

After generating an XPath for a dynamic web element, I came across two nodes that are strikingly similar. The XPath used is: //*[contains(@id, "gwt-uid-")]/span[2]. Despite my best efforts to distinguish between the two nodes, I have not been successful. A ...

Steps for adding a user-glyphicon within an img tag

In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image. //Please ensure necessary Bootstrap files are ...

The input field within the mat-form has been styled to match the background of the page using CSS

I am currently facing an issue with the code below: Html: <form fxLayout="column" fxLayoutAlign="center center" [formGroup]="deleteForm" (ngSubmit)="onSubmitForm()"> <mat-form-field color="accent" appearance="outline"> <input ...

Is there a way to automatically remove a video using JavaScript once it has completed playing?

This is my HTML section: <section id ="information"> <video id ="videoName" width="800" height="400" controls onplay="myAnimationPicture()""> <source src="video/videoName.mp4" ; type="video/mp4"> Your browser does not support the ...

Choosing a dynamic dropdown option using jQuery and AJAX

I am facing an issue with a select box that is dynamically populated and should display information about a single option. The problem I am encountering is that the browser does not trigger a ':selected' event when I click on any of the options. ...

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

Concealing and revealing content using JQuery based on user input in

I'm attempting to create a feature where the visibility of a password field is determined by the value of another input element. For instance, when the username is set to "admin", the password field should be hidden. If any other value is entered in ...

Tips for Aligning an Image Just Above a Card in Mobile and Tablet Screens with Tailwind CSS

https://i.stack.imgur.com/tPXEQ.jpg https://i.stack.imgur.com/3XkJo.jpg Just a heads up, this code snippet performs well on desktop but may have some issues on mobile and tablet devices. If anyone in the StackOverflow Community can offer some assistance, ...

Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...

HTML does not support the use of certain symbols

Currently, I am in the process of designing a homepage for my school project. However, I have run into an issue. The content that I want to be displayed on my homepage is as follows: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online ...

Encountering a SASS compilation issue in Bootstrap following the update to React 18

After the recent update from React 17.0.2 to 18.2.0, my application stopped compiling due to a SASS compilation error. The error message is as follows: SassError: property "url" must be followed by a ':' on line 6 of node_modules/bootstra ...

Get the div to occupy the rest of the available height

I am facing a challenge with two divs on my webpage. The bottom one contains content that expands the highest. The page is set to 100% height and width using the CSS property position: absolute. <style> body, html { height:100%, width:100% } ...

Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior. Some variables only seem to be overridd ...

How can I align text to the bottom right and left corners at the same time?

Is there a way to align text so that it appears in both the bottom right and bottom left corners of the page, functioning as a footer? For example: JANUARY (bottom left corner) / 2019 (bottom right corner) If anyone knows how to achieve this using HTML ...

Switch the orientation of the dropdown menu from vertical to horizontal in CSS

After downloading a CSS dropdown menu from purecss.menus.com, I attempted to modify it by changing the main menu to display horizontally instead of vertically. However, I am now struggling to figure out which part of the CSS code needs to be adjusted in or ...

Unknown identifier in the onClick function

I want to create a JavaScript function that can show or hide a paragraph when clicking on an arrow. The challenge I'm facing is that I have a list of titles generated in a loop on the server, and each title is accompanied by an arrow. Initially, the c ...

Identifying sluggish hardware or unresponsive browsers using JavaScript

My site features numerous CSS animations and transitions that run very slowly on specific browsers and older hardware. I want to avoid user-agent sniffing; is there a way to identify browsers or hardware configurations using JavaScript or a JS library, and ...

Is it possible to make the body background image adjust its size to the browser window

Looking to change the body background using a jQuery script. The goal is to scale the background image to fit the browser window size. I've come across a script called , but it seems to affect the class img and not the background-img. Any suggestions ...

What is the best way to incorporate Bootstrap into my Vue.js project while using vue-router?

I am currently working on a Vue project, following a tutorial. The project is using Vue Router and I am attempting to integrate Bootstrap into it. Here is the current setup: main.js import { createApp } from 'vue' import App from './App.vue ...

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...