Creating a mobile-responsive float-right image using bootstrap

There is an image positioned to the right, surrounded by text:

<img class="img-responsive" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Despite using the img-responsive class, the image squeezes the adjacent text on small screens. This creates a messy appearance. I'm looking for a solution to make the image expand to full width on extra small devices. Any suggestions?

csstwitter-bootstrapcss-floatgrid-layout

Answer №1

Discover a variety of solutions :

Utilizing media queries :

Bootply : http://www.bootply.com/9R942IK2VC

HTML:

<div class="container">
  <img class="img-responsive mypic" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS:

@media screen and (min-width:769px) {
  .mypic {float:right; 
}

Featuring duplicate images :

Bootply : http://www.bootply.com/dAWJyzJBeQ#

HTML

<div class="container">
  <img class="img-responsive hidden-xs" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
  <img class="img-responsive visible-xs" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Explore ZimSystem's response for insights into Bootstrap Grid System

Answer №2

Instead of using float:right, consider utilizing a grid system...

<div class="row">
        <div class="col-sm-3 col-sm-push-9"><img class="img-responsive center-block" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png"></div>
        <div class="col-sm-9 col-sm-pull-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </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

A Comprehensive Guide on Creating an Expansive HTML Textbox Covering the Entire

<form method="post" class="mobile-login-form _5spm" id="u_0_0" novalidate="1" data-autoid="autoid_1"> <input type="hidden" name="lsd" value="AVpe_Wp1" autocomplete="off"> <input type="hidden" name="charset_test" value="€,´,€,´, ...

htmlcss

Is it possible to disable the pointer event on the parent element only in CSS

Here's the structure I'm working with: <div class='offline'>some text <button class='delete'>Delete</button></div> I want to disable the div using pointer-events: none, but still keep the button activ ...

css

Why is my bootstrap-enhanced website appearing unattractive on MSIE 8?

Check out my website at My website displays perfectly in browsers like Firefox, Chrome, Opera, and the Android Browser. However, when I viewed it on Internet Explorer 8 at my parent's house, it looked all messed up. How can I improve the compatibilit ...

csshtmltwitter-bootstrap

Is there any practical reason to choose tables over CSS for controlling layouts?

As I dive into updating a large amount of code for a web application, I've noticed that tables are heavily used throughout to manage layout. Being relatively new to HTML programming, I find myself questioning the necessity of using tables when CSS co ...

htmlcssbrowserhtml-table

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

jquerycssajaxcallbackpositioning

How to modify CSS variables depending on the parent class: Leveraging the power of Sass and Tailwind CSS

Currently, I am in the process of customizing a Next.js website with Tailwind CSS and working on implementing a theme switching feature utilizing CSS (Sass) variables. There are two primary modes I am focusing on: Default mode: consisting of light and da ...

csssassnext.jstailwind-css

Implementing an onClick event to reveal a concealed div located above each bar in D3.js (potentially requiring additional CSS code)

I'm currently working on a project where I want a hidden div, named myDiv, to be displayed above the clicked bar whenever a square bar is clicked. Here's what I've attempted so far: 1) I have written a Javascript function called showDiv() ...

javascripthtmlcssd3.js

Adjusting the opacity of a div while scrolling

I've searched multiple pages, but haven't found a solution that works for me. I'm trying to make the text in my div gradually become more transparent as I scroll. Can anyone help with this? Here's my code: <script src = "/js/titleSc ...

javascripthtmlcss

Are there any class options that offer a wider width than modal-lg?

I am currently using vue.js along with Bootstrap. Within my modal dive, I am looking for a class that will help me increase the width of the modal div, As you can see from the image below, my modal div looks like this. I plan on adding 12 more tabs, whic ...

csshtmltwitter-bootstrapvue.js

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

javascriptjqueryhtmlcss

Non-clickable image

My social media page icons are not hyperlinked, and I can't figure out why. I've surrounded them with the href attribute, but for some reason, it's not working. Can anyone provide assistance? Here is the HTML code: <!DOCTYPE html> ...

htmlcsshyperlinkicons

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

Currently, I am utilizing Selenium/python to automatically scroll down a social media platform and extract posts. At the moment, I am gathering all the text in one go after scrolling a set number of times (see code below), but my objective is to only gathe ...

javascriptpythoncssseleniumselenium-webdriver

What is hindering the responsiveness of this HTML table?

I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll. https://i.sstatic. ...

htmlcsshtml-table

Tips on increasing video size upon visiting a website. HTML, JavaScript, and potentially jQuery can be used for video animation

Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...

javascriptjqueryhtmlcss

Why isn't my Bootstrap navbar expanding properly?

I am facing an issue with my toggle menu where it is not dropping down as a solid black block but instead in the center transparent. How can I fix this to make it drop down as a solid block and be positioned to the left? I have a bootstrap navbar that I mo ...

htmlcssnavbar

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

I'm attempting to modify a bootstrap 3 dropdown button to fully utilize the width properties of .btn-block class. It appears that the dropdown button does not respond in the same way as regular buttons. Below is my current code: <div class="row"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Issue with Font-Awesome icons failing to display properly when using the BootstrapCDN

Trying to integrate Font-Awesome icon fonts using the BootstrapCDN link with what seems like the latest version: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> The link has been added to the <hea ...

htmlcssfontsfont-awesome

Apply a specific class to the input field when the name matches x

I have a website that loads a JavaScript file from a commercial service, so I am unable to customize this file. The output of this JavaScript file is a form with various input fields, all of which have the class name "wf-input". I now want to add a jQuery ...

javascriptjquerycss

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

I am puzzled as to why my text and div boxes are displaying in my navbar/hamburger menu instead of at the bottom of the page

Greetings, everyone! This is my debut post here so bear with me if it's not presented in the correct format. Currently, I am deep into creating a website using HTML, CSS, and just a hint of JavaScript. My primary focus right now is on building the ho ...

javascripthtmlcssstyles