Arrange Image and text to adapt to different screen sizes

As a beginner in CSS, I am overwhelmed by the numerous ways to position elements on a webpage.

I am currently trying to achieve two different layouts:

Scenario 1 : Plenty of space available

[Image] this is the text that I want

Scenario 2 : Limited space available

[Image] this is the text

that I want

This is what I have achieved so far using display: inline:

Scenario 1 : 

[Image] this is the text that I want

Scenario 2 : 

[Image] 

this is the text that I want

I appreciate any tips in advance ;)

css

Answer №1

Have you considered testing this out?

[text class/id] {display:block; text-align: center}
[image class/id] {float: left}

While this coding approach may only result in the text consistently wrapping around the image, it presents a potential solution to explore.

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

Implement the MathJax package for automatic word wrapping of mathematical

I have implemented additional processing for MathJax using the following code snippet: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] }, "HTML-CSS": { ...

htmlioscssmathjax

Steps to insert a new row for a grid item using material-ui

When it comes to breaking a line of grid item like this, the image shown below illustrates how the rest space of the grid should be empty. https://i.stack.imgur.com/pvSwo.png <Grid container spacing={3} <Grid item xs={12}> "Grid Item xs ...

cssreactjsflexboxmaterial-uicss-grid

When utilizing the tab key on Chrome, the iFrame fails to scroll

We are currently facing an issue with our web application that is embedded inside an iFrame. On one of our HTML pages, there are numerous textboxes with a large amount of content, requiring users to scroll down to navigate through it all. When using the ...

javascriptjqueryhtmlcssiframe

The navigation dropdown menu in Bootstrap 4 spills over the edges of the window

In the code snippet provided above, an example of a navbar with a dropdown menu is given. One issue that arises is when the dropdown menu is clicked and it overflows to the right, causing a horizontal scroll bar to appear on the window. The question at ha ...

htmlcsstwitter-bootstrapbootstrap-4

Receiving inaccurate video duration when the input bar is modified

Initially, I am uncertain whether the issue stems from Javascript or CSS. The code in question involves displaying the corresponding video time when a user hovers over an input bar. The calculation utilized is as follows: ((user mouseX position / input wi ...

javascripthtmlcsshtml5-video

implement a night mode with a single click

I attempted to implement a dark mode using jQuery, but it is not working as expected. I am seeking assistance. I would like to enable the dark mode when clicking on the #btntheme ID, but for some reason, it is not functioning correctly. My goal is to be ...

jqueryhtmlcss

Creating an animated border that fades to transparency using keyframes

I am attempting to create a simple animation of a circle with a border that transitions from red to a transparent color. My approach is to initially set the color to red and then animate it to transparent using keyframes as follows: .pulse{ margin: 20 ...

htmlcssanimation

Using Data URIs can negatively impact the loading speed of a webpage

I created a custom script to replace all inline images with data URIs in order to minimize http requests and speed up loading times on mobile devices. Surprisingly, I noticed a decrease in loading speed. Could it be because the HTML file was larger (aroun ...

htmlcssperformancedata-uri

Effortless navigation through the document in both directions with seamless scrolling

To achieve a specific scrolling behavior on my webpage, I implemented the following function. Here is the code snippet: $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $("html, body").animate({scrollTop: 700}, 500); re ...

javascriptjqueryhtmlcss

Select a different inspiring quote every hour

Wouldn't it be great to add a touch of inspiration to my page with a new motivational quote that changes every hour or day? I'm thinking of compiling all the quotes in a document and having javascript randomly select one to display on my website. ...

javascripthtmlcssdatabasequote

Ensure that breadcrumb links remain on a single line by using text truncation in Bootstrap 5

For creating breadcrumbs in Bootstrap 5, the documentation suggests the following code: <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home ...

cssbootstrap-5

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

javascriptjqueryhtmlcssmeteor

Ascending to the Peak within a div

<script type="text/javascript"> $(document).ready(function(){ updateContent(); }); function updateContent(){ $('#mainDiv').load('home.php', function(){ scrollToTop(); }); } ...

javascriptjqueryhtmlcss

Remove the scrollbar from the iframe and instead display a scrollbar on the page in its place

Currently, I am facing an issue with the vertical scrollbar on an iframe. I want to remove it so that the scrollbar appears on the main page instead. This way, I will be able to scroll the content of the iframe using the page's scrollbar. I managed to ...

javascriptjquerycssiframescrollbar

Styling links conditionally in a React component

How can I style the page title in my nav bar when I am on the selected path? I am using React and Tailwind CSS. For example, I want the title to turn yellow when I am on the current page. Here is the logic I have tried, but it doesn't seem to be work ...

javascriptcssreactjsnext.jstailwind-css

Is it possible to change label text using CSS without referencing the element by its ID?

Here is a simple code snippet: <div class="delem"><label class="required" for="last_name">Full Name :</label><input id="fullname" type="text" name="fullname" value="" class="fullsize" required=""></div> <div class="delem" ...

cssreplace

Is it possible to incorporate a LINK within the CSS GRID layout?

Hey everyone, I've encountered an issue with my link placement in the grid. I'm looking to turn the entire box into a clickable link. * { padding: 0; margin: 0; } body { font-family: Hiragino Kaku Gothic Pro W3, Arial; } .title-conta ...

htmlcsscss-grid

Utilize bootstrap to smoothly remove the element from the layout without causing any unnecessary horizontal scrolling

Recently, I have been exploring the Bootstrap framework as a newcomer to this technology. While working on my landing page, I encountered an issue when trying to position an image next to some text using the grid system of Bootstrap. Initially, everything ...

cssbootstrap-4horizontal-scrolling

Steps to eliminate the 'Edit Translation' text on Transposh

Attempting to eliminate the 'Edit Translation' text provided by Transposh to maintain the existing translations. Implementing CSS code like so: #transposh-3:nth-child(8){display:none;} and localizertextnode{display:none;} However, these styl ...

csswordpress

Oddly stacked masonry tiles in a horizontal layout

After spending more than an hour trying to figure it out, searching and reviewing other solutions, I still haven't been able to resolve my issue. My problem is with 5 divs, where the third and fourth div are not stacking up as expected. Instead, the ...

jqueryhtmlcssjquery-masonrymasonry