A picture resting on the left side of the text

I'm struggling to align images to the left of text within a div.

When the screen is smaller than 768px, I want the images to stack on the left side of the text, with a maximum width of 150px. I've tried using float: left and adjusting the display property but it's not working as expected.

You can see the issue at this CodePen link

#mu-featured {
  position: relative;
  width: 100%;
  margin-top: 50px;
}

#mu-featured h2 {
  font-family: lato;
  font-size: 16px;
  font-weight: bold;
}

#mu-featured p {
  font-family: Roboto;
  font-size: 15px;
  color: #999;
}

.mu-featured-img img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin-bottom: 25px;
}

.mu-featured-area {
  padding: 70px 0 50px;
  width: 100%;
}

@media (max-width: 767px) {
  .mu-featured-container {
    overflow: auto;
  }
  .mu-featured-img {
    float: left;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<section id="mu-featured">
  <div class="container">
    <div class="row">

      <div class="col-xl-4 col-md-4 col-sm-12 mu-featured-container">
        <div class="mu-featured-img">
          <img src="https://static.pexels.com/photos/92623/pexels-photo-92623.jpeg" alt="">
        </div>
        <div class="mu-featured-content">
          <h2>TITLE</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          </p>
        </div>
      </div>

      <div class="col-xl-4 col-md-4 col-sm-12 mu-featured-container">
        <div class="mu-featured-img">
          <img src="https://static.pexels.com/photos/92623/pexels-photo-92623.jpeg" alt="">
        </div>
        <div class="mu-featured-content">
          <h2>TITLE</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          </p>
          <a href="#" class="">Call to action!</a>
        </div>
      </div>

      <div class="col-xl-4 col-md-4 col-sm-12 mu-featured-container">
        <div class="mu-featured-img">
          <img src="https://static.pexels.com/photos/92623/pexels-photo-92623.jpeg" alt="">
        </div>
        <div class="mu-featured-content">
          <h2>TITLE</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          </p>
          <a href="#" class="">Call to action!</a>
        </div>
      </div>

    </div>
  </div>
</section>

htmlcsslayoutbootstrap-4

Answer №1

There are numerous strategies to tackle this problem. One approach involves nesting a 2-column grid within each col-*-4. You have the flexibility to set the breakpoints and widths as needed.

        <div class="col-md-4 col-sm-12 mu-featured-container">
                <div class="row no-gutters">
                    <div class="col-md-12 col-4 mu-featured-img pr-1">
                        <img src="https://static.pexels.com/photos/92623/pexels-photo-92623.jpeg" alt="">
                    </div>
                    <div class="col-md-12 col-8 mu-featured-content">
                        <h2>TITLE</h2>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        </p>
                    </div>
                </div>
        </div>

CSS for limiting image to 150px in width...

@media (max-width: 767px) {
    .mu-featured-img img {
        max-width: 150px;
    }
}

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

Issue with PrimeFaces Gmap not displaying when using the UI include tag

Having trouble displaying a Google Map using Primefaces p:gmap within a ui:include component placed in a layout page. Currently using the latest versions of Primefaces, Mojarra, and Tomcat 8. This is the layout component where I am attempting to render th ...

ajaxgoogle-mapslayoutprimefacesrender

Conducting various calculations and showcasing them all on a single webpage

Uncertain about what to name this, but let's see if you understand my question. I have a table on a standard HTML page and I am performing some calculations using Javascript/jQuery. Example: function addThem() { var result; result = userIn ...

javascriptjqueryhtml

It seems that FireFox does not fully support IFrame Data URIs

Whenever I attempt to load a PDF Data URI into an iframe (for example, src="data:application/pdf;base64,...") in FireFox (version 18.0.2 [latest release], on OSX), it ends up triggering a download window instead. Just take a look at the website JSPDF.com ...

htmlfirefoxiframe

Concealing HTML content with a modal overlay

There are security concerns with my authentication overlay modal, especially for users familiar with CSS and HTML. Is there a way to hide the HTML behind the modal so it doesn't appear in the page source? The code below is just an example of a modal ...

javascriptjqueryhtmlcss

Remove the active class after it has been clicked for the second time

Currently, I am working on a menu/submenu system where I want to toggle active classes when clicked. However, I encountered an issue - if the same menu item is clicked twice, I need to remove the active class. Initially, I tried using jQuery's toggleC ...

javascriptjquerycss

Is it possible to turn off wrapping behavior within a div using CSS3 or Bootstrap?

Currently, I am working with code that utilizes Bootstrap 2. <div class="row-fluid"> <div class="span4">Some text 1</div> <div class="span4">Some text 2</div> <div class="span4 ...

htmlcsstwitter-bootstrap

Creating solid, dotted, and dashed lines with basic HTML/CSS for tcpdf rendering

Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...

htmlcsstcpdf

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to

In my code, I have multiple div elements that have the mask-image and -webkit-mask-image CSS rules applied to them. These divs are being used as UI slider components, so I want keyboard users to be able to tab between them and use the arrow keys to adjust ...

cssfirefoxaccessibility

Learn the process of playing a video in an HTML5 video player after it has finished downloading

// HTML video tag <video id="myVideo" width="320" height="176" preload="auto" controls> <source src="/server/o//content/test2.mp4" onerror="alert('video not found')" type="video/mp4"> Your browser does not support HTML5 vid ...

javascripthtmlvideovue.jsvideo-player

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

jquerycssjquery-selectors

What is the best way to align two divs next to each other while keeping the second one centered with flexbox?

Here are my two div elements: <div class='container'> <div class='left'></div> <div class='centered'></div> </div> I am looking to center the second inner div and have the first inner ...

htmlcssflexbox

Utilizing jQuery time intervals within a jQuery click event: A step-by-step guide

For my dropdown menu project, I am facing an issue where the menu bar is not reappearing after collapsing the dropdown. It seems that the jQuery function responsible for toggling classes within a time interval is not executing properly. Specifically, the " ...

javascriptjqueryhtmlcss

What is the method for incorporating a dotted line preceding the menu options?

I am currently working on an asp.net menu that looks like this: <div id="left"> <div id="menus" runat="server"> <div id="left_menu"> <div class="abc"> < ...

asp.netcss

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

javascriptjquerycssanimationwebkit

Tips for making a responsive datatable show more than six columns

I have implemented a responsive datatable with 7 columns. To see it live in action, you can check out the larger table within its template: The specific datatable plugin I am using is available here: https://datatables.net/extensions/fixedheader/examples/ ...

jquerydatatablesbootstrap-4

Ways to exhibit API information leveraging the prowess of Ajax

I am looking for a way to utilize the API in order to present data in an organized manner, similar to the following example: Job Title: Agricultural and Related Trades Percentage of Occupancies in Area: 15.41% Unfortunately, my attempt to showcase the d ...

javascriptjqueryhtmlajaxapi

Can you tell me if the "dom model" concept belongs to the realm of HTML or JavaScript?

Is the ability to use "document.X" in JavaScript to visit an HTML page and all its tags defined by the HTML protocol or the ECMAScript protocol? Or is it simply a choice made in the implementation of JavaScript, resulting in slight differences in every bro ...

javascripthtmldommodelprotocols

The Google Map is not showing all the details

Our app is developed using ReactJS on Rails API, with a Google map integrated. However, when visiting this link and clicking "Map View", some grey space appears under the Google Map. An example image can be found here: example We are having trouble findi ...

javascriptcssreactjsgoogle-maps

Two full screen divs aligned side by side using float:left

Looking for a way to create UL or DIV elements where each list item/child div takes up the full screen space (100% width, 100% height) and is floated left for horizontal scrolling. Here's my code, but it's not working as expected: HTML: <htm ...

css

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss