To move the "div" element to the right, use the following code block:

<div class="image-caption" style="float: right;"><img alt="michael flanagan" src="https://news.cvad.unt.edu/sites/default/files/flanagan-michael-portrait-330x420px.jpg" />
<div class="caption">Michael Flanagan</div>
</div>

michael flanagan
Michael Flanagan

If you want to move the "div" element to the left, you can use the following code block:

<div class="image-caption" style="float: left;"><img alt="michael flanagan" src="https://news.cvad.unt.edu/sites/default/files/flanagan-michael-portrait-330x420px.jpg" />
<div class="caption">Michael Flanagan</div>
</div>

michael flanagan
Michael Flanagan

In order to resolve the margin, padding, and wrapping problem for above caption, please attempt to modify the dimensions mentioned below (In CSS):


.image-caption img {
  display: block;
  width: 94%;
  height: auto;
}
.image-caption .caption {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 94%;
  padding: 5px;
  background-color: #e5e5e5;
  color: #333;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}

How to wrap the text around an image using HTML and CSS ?

1. Add div class

<div class="centered-text">
Your text goes here.
</div>
 

2. Now add CSS:

.centered-text {
text-align: justify;
}
.centered-text::after {
content: "";
display: inline-block;
width: 100%;
}

Explanation: 

In the code above, we define a CSS class called centered-text. The text-align: justify; property is used to evenly distribute the text within the <div> container. The ::after pseudo-element is used to create an inline block that expands to 100% width, effectively stretching the text on both sides.

Simply replace the "Your text goes here." placeholder with your desired content, and the text within the <div> will be stretched equally on the right and left sides.

If any Video, Form, Pop-up is not playing despite being embedded correctly, please utilize the script!

  1. Edit the Node
  2. In body section, select Text format -> Full HTML
  3. Click on source at top left
  4. Edit the iframe tag:
  5. <iframe src="" width="" height="" frameborder="" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  6. Add the below sandbox script:

sandbox="allow-same-origin allow-scripts allow-popups allow-forms"

Caused by: The browser's self-protection mechanism prevents the execution of third-party scripts, leading to this issue.

 

Example: 

<div style="display: flex; justify-content: center; margin-left, OR margin-right, OR margin-top, OR margin-bottom: 10px; OR float:left; OR float:right;">
  <iframe width="1200" height="675" src="https://www.youtube.com/embed/CSogTrqf36c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" allowfullscreen></iframe>
</div>

Card Caption

<div>
<div class="card">
<div class="card-image"><img alt="Sculpture installation by Henry Thomas, Class of 2023" src="https://news.cvad.unt.edu/sites/default/files/thomas-henry-ugrad-sclp-500x400px.jpg" title="Sculpture installation by Henry Thomas, Class of 2023" /></div>

<div class="container">
<p class="card-body">Students learn professional-level technical skills and expert solutions to aesthetic and design problems using clay, wax, metal, stone, fabric, wood or other sculpture media. Image courtesy of artist Henry Thomas.</p>
</div>
</div>