The image is released from the div

I’m working on a <section> that contains text and an image. I’ve applied a background to the section, but for some reason it doesn't affect the image. The image has a bootstrap class. Any idea what I might be doing wrong? Thanks in advance.

<section class="about">
    <h2>Title Goes Here</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <img src="https://media.licdn.com/dms/image/C5603AQH92_pzwQHHGA/profile-displayphoto-shrink_200_200/0?e=1529355600&v=beta&t=8VBme0P0e-CIprWjJzI15iFhkJsSl9SbfdKmzABs3Pc" class="rounded float-right">
</section>

cssbootstrap-4

Answer №1

Make sure to include overflow: hidden; in your description class.

.description {
    background: blue;
    overflow: hidden;
}

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

Adjust the size of the pagination for subsequent pages in posts

Could someone please assist me with changing the size of post pagination that includes the code --nextpage--? I've attempted the following code: .td-post-content .page-nav a { font-size: 16px; } Unfortunately, it isn't working as expected. App ...

csswordpress

Enhancing Speed and Efficiency with Now ui kit CSS Framework

Recently, I switched over to the stunning Now-UI kit which is built on Bootstrap 4.0. While Bootstrap has always been highly responsive on all devices, I am currently facing an issue with the responsiveness of the Now-UI kit on mobile devices. If you cou ...

cssbootstrap-4

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

htmlcss

I am interested in designing a dynamic wave-themed background for a menu

I am looking to create a menu background that ripples like a wave when hovered over. Check out the first example here: https://i.sstatic.net/LoOWM.png I want to achieve the same effect. Can anyone help me with how I can do this? <ul> <li>likk ...

javascripthtmlcsssvgbootstrap-4

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

javascriptcssreactjsmaterial-ui

Creating a component that surpasses all others

I have a code snippet that contains styling information for two div elements. How can I ensure that my <div id="home"> appears below my <div id="navigate"? Any suggestions? #home { background-color: black; color: grey; text-align: c ...

htmlcss

What is the best way to align HTML inputs within a grid, whether it be done automatically or manually using JavaScript?

Arrange 20 HTML inputs with various data types into grid-columns as the user inputs data. Ensure that the grid container has div elements correctly positioned for output. ...

javascripthtmlcss

Angular 10: A guide to dynamically highlighting navbar elements based on scrolling position

I am currently working on a single-page application using Angular 10. I have a simple page layout and I want to implement a feature that will highlight the navbar based on the scroll position. How can I achieve this functionality in a single-page applicati ...

javascripthtmljquerycssangular

Tips for accurately placing the iOS audio player in the footer section

In my web page, I have created a simple footer that shows the currently playing track title and includes an HTML audio player. The layout looks great on desktop browsers and Android devices, but on iOS, the player is positioned far below the footer. To ad ...

htmlioscsshtml5-audio

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

javascriptcssreactjsreduxmaterial-ui

Website Not Loading Correctly

Why is my webpage not loading properly, even though it has the same HTML and CSS as my other functioning pages on the site? The page loads without the h1 element. If I comment out the span used for adding a transparent background image behind the whole we ...

htmlcss

SVG Mask not functioning properly with SVGs created in Illustrator (in all web browsers)

Alright, let's get to it - I've got a couple of SVGs here. The first one is a blue circle and the second one is a map of the United States. (Both of these were created in Illustrator) Here's what I want to do: I want the map to serve as a ...

htmlcsssvgmasking

Use CSS to center-align the content

While attempting to create a Google search replica, I encountered an issue wherein the contents ended up superimposed rather than arranged at the center. Is there a method to organize them in a dropwise format? <!DOCTYPE html> <html lang="e ...

htmlcssvertical-alignment

unusual problems with absolute positioning in CSS

I've run into a problem with absolute positioning in my CSS. Oddly, IE 10+ displays correctly, but Chrome gets distorted. See the images below: Any advice would be appreciated. (This distortion seems to have started after the Chrome 52 update) IE ...

htmlcssgoogle-chrome

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles. import { Pagination } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core"; const pagination = makeStyl ...

javascriptcssreactjsmaterial-ui

Updating the style of different input elements using Angular's dynamic CSS properties

I am seeking guidance on the proper method for achieving a specific functionality. I have a set of buttons, and I would like the opacity of a button to increase when it is pressed. Here is the approach I have taken so far, but I have doubts about its eff ...

javascriptcssangulartypescriptdynamic

Disable the swipe feature on a Bootstrap carousel to prevent users from navigating through slides on mobile devices. The attribute data-touch="

I've been attempting to deactivate the swipe function on my Bootstrap 4 carousel in my project, but it's proven to be quite challenging. Despite it being a basic carousel, I'm finding it difficult to turn off this feature. What am I missing ...

javascriptjquerybootstrap-4

What could be causing this unexpected delay?

I have been working on improving the load time of my website as it was quite lengthy, but even after optimizations, I am facing issues specifically with the jQuery UI CSS images. If you could spare a moment, would you mind taking a look at this Pingdom te ...

csspathdelayload-timepingdom

Creating a navigation bar that stays fixed at the top of

Hey there, currently I am utilizing a combination of jquery and css to affix my navigation menu at the top when scrolled. However, the problem is that my navigation menu is positioned beneath a div with a height set in viewport units (vh). The jquery scr ...

javascripthtmlcss