Float image with text wrapping around it, with a minimum wrapping size requirement

Need help with wrapping text around a 320px width image that is floated left? Here is the HTML code:

<div>
    <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" style="width:320px; float:left; margin:0 10px 4px 0;">
    a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg a bb ccc ddd eeee fffff gggggg  
</div>

Encountering an issue when the window size is between 321-400 pixels, causing the text to look weird. Looking for a solution to define a minimum width (to the right) of 100 pixels so that the text wraps down beside the image and then extends under it when the screen is wider.

The desired behavior:

- When the screen is 320px wide, image on top and text below.

- With a screen width of 370px, image remains on top with text below.

- For screens larger than 420px, image floats left and text wraps around to the right and beneath it.

Seeking a simple CSS solution without relying on complex JavaScript for screen resolution adjustments.

Thank you!

😊

Edit:

Here's a link to the fiddle.

Resize the window to see only the letters "a" and "bb" displayed on the right side.

htmlcssimageflexbox

Answer â„–1

Implement media styles in CSS to adjust for different screen resolutions.

@media screen and (max-width: 420px) {
img {
   float:none !important;
}}

This block of CSS will only take effect if the screen size is below 420 pixels.

Answer â„–2

https://jsfiddle.net/manukarki/12syovj0/2/

Implement a media query for responsiveness.

img{
  width:320px; 
  float:left; 
  margin:0 10px 4px 0;
}
@media only screen and (max-width:370px){
  img{
    float: none;
  }
}

Your question lacks clarity. You mentioned displaying image only under 370px and image with text above 470px. What about the resolutions in between?

Note that using 370px won't achieve the desired outcome. The optimal choice would be 420px.

@media only screen and (max-width: 420px){

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

Javascript: Troubleshooting Unexpected Variable Behavior in HTML Code

My issue is as follows: I am attempting to retrieve text from a JSON file in my HTML. In the header of my HTML, I have linked a tag with the following code: var language = ""; var langDoc = null; //Function to change the value function setLang() { v ...

javascripthtmljsonvariablesnull

What is the process to set a Woocommerce checkout field as optional when a checkbox is marked?

I need assistance with customizing the checkout page on Wordpress Woocommerce. Specifically, I want to make the field 'billing_name' not required if the checkbox 'buy_on_company' is checked. Currently, I have successfully hidden ' ...

javascriptphphtmlwoocommerce

How does my navigation and slider function in Internet Explorer 10?

Currently, I am in the process of developing my own website at www.heike-waltz.de In the past, I relied on conditional comments for IE, but now that this is no longer an option for IE10, I am facing some issues that I'm not sure how to resolve. Whil ...

cssinternet-explorer

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...

javahtmlselenium-webdriver

Struggling with grasping the concept of bootstrap scroll spy

I'm struggling to grasp the concept of scrollspy and how it functions. Despite reviewing numerous examples, I remain perplexed, which is why I've come here for help. My understanding is that scrollspy monitors scrolling behavior and triggers cert ...

htmlcssbootstrap-4

When sending a post request in MongoDB, only the object's _id is displayed

Can someone help me with an issue I am facing with a contact form in my HTML file? The form code is as follows: <form action="/contact" method="post"> <input type="text" name="name" id="" placeholder="Name"> <input type="email" name ...

htmlnode.jsmongodbexpressmongoose

The JQuery click handler seems to only be functioning on the initial item

I am currently working on a table where I need to create a functionality that can change a value in the database for each row. However, I am facing an issue where the changes I make only affect the specific row in the table and not the rest of the rows. M ...

javascriptphpjqueryhtmlajax

Executing a PHP script to initiate a ping transmission

I have a project to complete for my university involving the development of a simple application. However, I lack experience in this area and am unsure how to proceed. The objective is straightforward: I want to send ping requests to 50 IP addresses at t ...

javascriptphpcsshtmlping

Utilizing a Recycled jQuery UI Themeroller Overlay

I'm looking to optimize css-loading bandwidth by reusing the overlay from jQuery UI for a specific section of my page. However, I'm encountering an issue where the overlay only covers a semi-transparent blackout of the entire page instead of just ...

jquerycssjquery-ui

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

cssinternet-explorergoogle-chrome

Position a div to float in the top right corner without overlapping its sibling header

Is there a way to position a div in the top right corner of a section without overlapping the text of a h1? This is the HTML code: <section> <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> < ...

csshtml

iOS 11's Mobile Safari presents a challenge for web apps with the nav bar overlapping the top portion of the screen, cutting off content that relies on

When using 100vh on Mobile Safari, it fails to account for the height of the lower navigation bar. For example, look at the screenshot below. To show my app-like footer, I have to manually subtract 74px from the container's height in a somewhat messy ...

cssweb-applicationsresponsive-designmobile-safari

The alignment of the list is off when using Flexbox on smaller screens

When my flexbox shifts into a column layout at 600 pixels, the list in the second box loses its center alignment on smaller screens. Despite trying various margin and padding adjustments within and outside of media queries, the content remains too far to t ...

htmlcssflexboxbootstrap-4twitter-bootstrap-4

Is there a way to fix the close button on the menu so that it works more than once?

I have developed a JavaScript-powered navbar, but I am facing an issue with the closing button. It seems to work only once. If I try to open and close the menu repeatedly, the closing button stops working. I suspect there might be an error in my code, but ...

javascripthtmlcss

How to ensure scrollbar adjusts to increasing height when using scroll:auto?

My <div> element has the style property scroll:auto. Whenever text is added to the <div> and the content height exceeds the default height, I find myself having to scroll down in order to see the latest lines of text that have been added. What ...

jqueryhtmlcss

I have encountered a formatting issue while using an external CSS file for the main layout of the header and sidebar in Laravel-8 with Bootstrap-5. When I try to @extend certain classes, the content layout becomes distorted

Customizing the Main Layout CSS File for Header and Sidebar: <link href="{{ asset('app.css') }}" rel="stylesheet"> *Note: The external app.css file is located in the public directory. Homepage Content <link rel=&qu ...

htmlcsslaravel-8laravel-bladebootstrap-5

Aligning two floating elements vertically in respect to each other

Although the topic of vertically centering elements is common on various websites, I am new to HTML and still find it confusing even after doing some research. I attempted to create a basic header element for a website that includes an h1 title and a navi ...

htmlcssvertical-alignment

Exploring the functionality of buttons within jQuery Impromptu

My current project involves creating a survey composition tool. The main focus is on having a preview button that displays the values inputted by the user. <!doctype html> <html> <head> &l ...

javascriptjqueryhtml

Utilize the power of MYSQL and PHP in conjunction with an HTML form to

Having trouble with a basic PHP/SQL search bar for my database. The search results are not showing up even though the search bar appears on the page. When I type something, it doesn't reflect in the URL. Below is the code snippet. I am connecting to t ...

phphtmlmysqlmysqli

Tips on utilizing Blazorise's numeric edit group with grouping functionality

I recently attempted to utilize the numeric edit group separating attribute in Blazorise but encountered issues. According to the documentation, it should be possible to use this feature, however, my attempts were unsuccessful. I would greatly appreciate ...

c#htmlbootstrap-4blazorise