wrap text image not compatible with responsive layout

Plunker Link: https://plnkr.co/edit/kC9SPK2e7iy5OYhKpwOO?p=preview

<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="m-2 ml-4" style="color: whitesmoke;">
    <div class="row text-justify">
      <div class="container">
        <div class="text-center row ml-2">
          <h1>About me</h1>
        </div>
        <article class="row single-post no-gutters">
          <div class="col">
            <div class="image-wrapper float-right pr-3">
              <img src="https://via.placeholder.com/1000" style="width:50%; margin-left: 25px; margin-right: -10px;" />
            </div>
            <div class="single-post-content-wrapper" style="text-align-last:right; padding-top: 5px;">
              Custom text goes here....
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</body>

</html>

At line 21, an image is loaded and wraps as intended when set to a specific pixel distance. How can this be adjusted to be responsive when using percentage values instead of fixed pixels?

Edit: I am attempting to achieve this responsiveness within Plunker on this page, seeking assistance on how to accomplish this...

Update: Using view-width instead of percentage seems to achieve the desired result, although it may limit the component to the page rather than its parent container...

htmlcssbootstrap-4

Answer №1

Check out the code snippet below for assistance. Be sure to utilize valid Bootstrap classes.

html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="x-ua-compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
   <script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <style type="text/css">
      .hd-titile{color:#111;}
      .pro-img{width:200px;height:200px;margin: 21px 0px;}
      .pro-img img{width:100%;}
      .dis-txt{color:#111;}
      @media only screen and (max-width:767px) {
      .pro-img {width:100%;height:auto;}
      .hd-titile h1{font-size: 25px;margin: 15px 0px 0px;}
      }
   </style>
</head>
<body>
   <div class="" style="color:whitesmoke;">
      <div class="text-justify">
         <div class="container">
            <div class="hd-titile">
               <h1>About me</h1>
            </div>
            <article class="single-post no-gutters">
               <div class="col-md-12">
                  <div class="image-wrapper pro-img">
                     <img src="https://via.placeholder.com/1000">
                  </div>
                  <div class="single-post-content-wrapper dis-txt">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra nisi sed nisi tempor, non suscipit libero dictum. Vivamus gravida cursus malesuada. Pellentesque mi nulla, pharetra ut quam sed, lobortis rhoncus lectus. Cras vel augue mi. Aliquam
                     vulputate dictum ex, sollicitudin tincidunt purus venenatis sed. Donec bibendum ligula eu justo auctor, ac efficitur tortor sodales. Quisque sit amet facilisis neque, sit amet volutpat velit. Sed sagittis mattis enim, vel tincidunt dui gravida
                     tincidunt. Donec imperdiet sem vitae sagittis lobortis. Pellentesque semper gravida massa. Suspendisse congue ac orci ut dapibus.
                  </div>
               </div>
            </article>
         </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

Guide to displaying a function result in Vue 3

I have just started learning vue js and I am facing an issue. I want to display the value returned by the following function in a table row: The function is: getGroup(id){ this.users.forEach(element =>{ if(element.id===id) ...

javascripthtmlvue.jsvuejs3

Ways to enhance the resilience of the max-width property when utilizing PHP calls or dynamic CSS styling

I attempted to customize the CSS in page builder mode by adding the following code: #content { max-width: 2000px; } While in page builder mode, the desired effect was achieved. However, once I published the changes, the page reverted back to the prev ...

csswordpress

What is the best way to apply "display: none;" on a span element nested within a title attribute?

I am utilizing the social-share-button gem to share blog posts on social media. The website has been internationalized, making it bilingual (English and German). Everything is functioning correctly, but I encounter an issue with the social share buttons wh ...

javascripthtmlcssruby-on-rails

My DIV is not floating to the right as expected. What could be the issue?

I'm having trouble positioning the timer to float on the right top side of the logo. Even though using the regular style="float:right" works perfectly... <div id="whole_page" /> <div id="header" /> <?php echo " ...

csshtml

Even after applying the CSS property "resize:none" to my HTML textarea, I still find it to be adjustable in size when viewed in the Opera browser

I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size. I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in ...

csshtmlthymeleaf

Is it possible to set the input form to be read-only?

I need to create a "read-only" version of all my forms which contain multiple <input type="text"> fields. Instead of recoding each field individually, I'm looking for a more efficient solution. A suggestion was made to use the following: <xs ...

javascriptjqueryhtmlinput

Tips for preventing an AJAX response from populating a select dropdown

https://i.sstatic.net/gA1VE.gif In the example above, there is a placeholder (an option without value) that says something like Select Subcategory. When I change the category value, the subcategories are displayed. But what I want is for the subcategory ...

javascriptjqueryhtmlajax

AngularJS - Show Banner after two rows, then show two more rows

I'm attempting to showcase a Banner <div> after 2 rows of 4 x "col-md-3", succeeded by another 2 Rows - thus, resulting in the following markup: <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div clas ...

angularjshtmltwitter-bootstrap-3

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...

javascripthtmlcss

Adding tween.js seems to have caused the button click event to stop triggering

After adding the code line to tween my display box, the click event is no longer triggered. There are no errors in the console. How can I resolve this issue and what might have caused it? createjs.Tween.get(directionsbox, { loop: false }).to({ x:800, y: ...

javascriptjqueryhtmlcreatejstween

Only a select few expandable elements in the jQuery accordion

How can I create an accordion menu with only a few expandable options? I am looking to include the following items in my menu: Home, Support, Sales, Other The "Home" option is just a link without any sub-menu. Clicking on it should direct users to a spec ...

javascriptjqueryhtmlcssaccordion

The property 'join' is undefined for null values

I've recently started learning AngularJS, but I'm having trouble figuring out what's causing issues in my code. Despite trying various approaches, the outcome is always incorrect. <!DOCTYPE html> <html lang="en" ng-app="myApp"> ...

javascripthtmlangularjs

Issue with Bootstrap dropdown not appearing properly when switching between screen sizes

I am currently working on converting a side navigation in bootstrap to a dropdown when the window is resized. However, I am experiencing an issue between the medium and small screen sizes where for a few pixels, nothing is shown. The side navigation disapp ...

htmlcsstwitter-bootstrapresponsive-designnavigation

"Enhance your client-side PDF capabilities with the pdfMake plugin, offering support for multiple languages

I am in search of a plugin that can convert HTML content into a PDF format and is compatible with javascript/jQuery/AngularJS. It must also provide multilingual support. I have experimented with the following two plugins, but encountered limitations with ...

javascriptjqueryhtmlangularjs

How can you apply an active class using React-Router?

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

cssreactjstypescriptreact-routerreact-router-dom

Express and Node.js working together

Recently, I've been encountering an issue with my POST function. Whenever I click on the log in button, a message pops up saying: Cannot POST /login I'm at a loss here and would greatly appreciate any help you can provide \(^-^\) B ...

javascripthtmlnode.jsexpresspost

Ensuring Consistent Height for a Responsive HTML Document Across Devices

My html page is facing a problem when printing from different Android devices. The page height changes dynamically based on label updates through JavaScript, and I pass this height to adjust the printed page (approximately 856x3000 pixels). However, issu ...

androidhtmlcssprinting

Encoding and Displaying Characters in HTML with UTF-8

I am experiencing an issue with UTF-8 characters in the page title. I would like to include the music symbol ♫ on the page title. The strange thing is that sometimes it displays correctly (in Google Chrome) and other times it shows a square symbol indic ...

javascripthtmlencoding

What is the process for dividing a form into two separate columns?

I am working on a form that sends input to a PHP script. I want to reorganize the form so that the second section (Person 2) appears in a column to the right of the first section (Person 1), instead of below it. <link rel="stylesheet" href="test.css" ...

htmlcssforms

Tracking accurate responses with button click

In my quiz, I want to keep track of the correct answers selected by the player. When a player clicks on the correct answer, the counter should increase by one. At the end of the quiz, the HTML should display a message like "You got" + correct + "answers co ...

javascriptjqueryhtml