Content split into two equal parts, with text and image positioned side by side

In this example, the image in the caption is linked to a Photoshop file. The color coding explains that black represents sliders, grey represents images, and white represents text areas with changeable background colors.

The goal is to create a responsive layout for phone devices by aligning an image to the left and text in a container next to it, with a changeable background for the text. Various CSS properties have been tried including left, right, margins, and paddings without success.

The content should be positioned underneath the div elements A3L_Slogan and A3L_Catchphrase. Assistance is requested on how to achieve this design.

A JS fiddle link is provided without any of the mentioned code included.

htmlcss

Answer №1

For organizing your image and text together, create a container like this:

 <div class="content-wrapper">

    <div class="main-image">
      <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
    </div>
    <div class="brand-message">
      <div class="message_title">
        Dynamic Brand Identity
      </div>
      <div class="message_tagline">
        Elevating Brands to New Heights
      </div>
    </div>
  </div>

To align the elements effectively, utilize flexbox properties

.content-wrapper{
  display: flex;
}

.content-wrapper .main-image{
  flex: 1;
}

.content-wrapper .brand-message {
  flex: 2;
}

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

Acquire dynamically loaded HTML content using Ajax within a WebView on an Android

I have been attempting to extract the content of a web page on an Android platform. Despite trying JSoup, I faced a limitation with ajax support. As an alternative, I am endeavoring to embed the URL within a hidden web view and retrieve the HTML in the on ...

javascriptandroidhtmlajaxandroid-webview

Obtaining complete address details for every location on the Google Maps route

In my Windows Forms application using VB.NET, users can search addresses on Google Maps and view directions between two points. I've implemented a feature that allows users to adjust the route as they wish. Now, I'm wondering if there is a way fo ...

htmlvb.netgoogle-maps-api-3browser

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...

androidcssios7

What are the steps for implementing Bootstrap in a separate file while working with the Laravel framework?

Inside the bootstrap file, the syntax for Bootstrap is found in the layout.backend file. One of the menu names is "Form Sederhana". Within Form Sederhana, there is an input field for inserting new data. When clicking on the input field, no design from the ...

phphtmlbootstrap-4laravel-5.8

Cycle through items and switch states using classList in JavaScript

Instructions: Utilize javascript and the classList property to change which elements have the .highlight class. Iterate through all the <li> elements and toggle the .highlight class on each one. Do not make any changes to the HTML and CSS. Your end ...

javascripthtmldomdom-eventsdom-manipulation

Unveiling the mystery: Revealing a hidden input value post file upload

var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' &g ...

phpjavascriptjqueryhtmlajax

What is the best way to position my "bar" div at the top of the page?

For the school presidentship voting system that I created, I am looking to enhance the user interface through website styling. In my administrator view, there are numerous codes displayed which require scrolling down frequently. Here is the code snippet ...

javascriptjqueryhtmlcss

Guidelines for arranging nested divs in a CSS grid for a flat display

When using vue.js, I create a table from an object that should have two columns. Each column is generated from the key and value of the object. Here is the equivalent HTML: <div id="table"> <div> <div> this is something long ...

htmlcsscss-grid

Spinning icons in React: A step-by-step guide

Currently, I am attempting to create a spinning icon using React, but it seems like I might be overlooking something in my approach. Here is the return function that I have: return ( <div className="loader"> <p>Loading Dat ...

htmlcssreactjs

Using JavaScript to open a document file in Chrome at launch

Is it possible to automatically open a doc file stored on my C:// drive when a link is clicked on my HTML page? Here is the code I have been using: <a href="C://mytestfile.doc">Click Me To launch the DOC FILE</a> Unfortunately, instead of op ...

javascripthtmlgoogle-chrome

What could be causing the variation in appearance between my website on PC and Android compared to iOS when viewing a ReactJS page?

My reactjs web page is fully responsive and displays consistently on Google Chrome for PC and Android. However, I have noticed that there are some differences when viewing it on Google Chrome for iOS. In particular, the loading animation and green line gen ...

htmlcssiosreactjsmobile

Struggling to make the AJAX script function properly

I have a table containing a list of transactions and I am attempting to update the table contents at specific intervals. The web page is hosted on a Linux Red Hat server, and currently, only the AJAX functionality is not functioning as expected. <!do ...

javascripthtmlajax

As soon as I inserted the image, the text vanished into thin air

The phrase "welcome" is not displaying after I included the av tag <!DOCTYPE html> <html> <style> @font-face { font-family: OpenSans; src: url(OpenSans-Bold.ttf); } * { ...

javascripthtmlhtml5-canvas

Customizing the Background of an Input Box

How can I create an input box with a specific background? I have tried the following code but it's not displaying properly. What is the correct way to achieve this? In addition, I need to create variations of this button as described below: I wa ...

cssformslayoutinput

WordPress having trouble rendering the stylesheet code

I am facing an issue with Wordpress where my CSS file is not loading properly. The stylesheet contains a rule to center the header image, but for some reason it's not working. I've also tried adding a margin-left of 100px, but that doesn't s ...

csswordpress

Wrap the nth word in a div with a span

I am in the process of creating a basic spell checking system. Let's say I have a div with the following text: <div>This is some content with abc and other words</div> My spell checker can correctly locate the div (returning a jQuery obj ...

javascriptjqueryhtml

Could one potentially append an attribute to a script that has been loaded by nuxt?

Is it feasible to include an attribute to a script loaded through nuxt? https://i.sstatic.net/UXDYW.png Situation: I am in need of adding an attribute to make Cookiebot () disregard my script. Currently, it is blocking a few scripts that send client-side ...

htmlvue.jswebpacknuxt.js

Looking for Protractor CSS functionalities nodes

I tried the code below but am having trouble locating the "Login" text using Protractor: <div _ngcontent-c2="" class="align-center"> <img _ngcontent-c2="" alt="Autoprax" class="ap-logo" src="/images/apLogoSmall.svg" style="width: 100%"> ...

htmlcssangularprotractor

Enhancing Material UI Popper with Custom Styling

My Desired Outcome My Current Situation I am attempting to use flexbox to achieve a specific layout. However, I am struggling with managing the spacing between two text fields (text and secondaryText). What is the best way to approach this issue? popper: ...

cssflexboxmaterial-uistylingpopper.js

What could be the reason for this jquery code not functioning properly?

if($('.navigation ul li ul').children().length === 1) { $('.navigation ul li ul li a').css({opacity:0.5}); } else { $('.navigation ul li ul li:first-child a').addClass('first') ...

jquerycsschildren