CSS

Hi. I hope someone here can help. I can't figure out how to align the header inside the div. I can't change the min height to adjust. What is wrong? I've also added an image of the issue.

HTML:

 
<div class="introbox-one header">
        <h1 class="header">HEY! THIS IS A HEADER</h1>
      </div>

CSS:

.introbox-one {
  width: 80%;
  height: 16px;
  border: 1px solid #9A00FF;
  padding: 10px;
  background-color: #9A00FF;
  animation: introbox-one 1s ease-in;
}
 
@keyframes introbox-one {
  0% {

I am attempting to create an image container where different sized images (height and width) fit in a div so that they all look the same height and width - think slide show. What I have created so far, does shrink the images but does not alter them to fit. So, although the same width, they are not the same height. I have attached an image of how the images look.

This is the css:

.col {
  width: 80%;
  margin: auto;
}
.colcontainer {
  vertical-align: top;
  width: auto;
  height: auto;
}
.colcontainer img {
  width: 75%;
  height: 75%;
  object-fit: contain;

Hello,

am moving from column-count css to this code : Codepen

I use to have
max-width: 501px : 1 Column
min-width: 502px to max-width: 890px : 2 columns
min-width: 891px to max-width: 1200px : 3 Columns
min-width: 1201px : 4 Columns

with Max column width of 400px

How can I adjust the codepen to match the above ? P.S. Am a bit lost with the fraction.

Hello,

My site is based on Joomla and I use k2 extensions to display photos in a Masonry Style (because photos are not of the same height.

The link is here : Photo website dedicated to Mauritius

The photos are displayed correctly but not in the right order.

I would like the output to be:
 
| item 1          | item 2          | item 3          | item 4 
| item 5          | item 6          | item 7          | item 8 
| item 9          | item 10         | item 11         | item 12 

having an issue with getting images to display as squares in 1:1 aspect ration on wordpress.
Im pulling in Woocomece gallery images and displaying them on the page.

However as you can see in the attached screenshot the object-fill: cover; or object-fill: fill; or even object-fill: none; is not working.
They are all being treated like object-fill: contain; but I need to show square thumbnails for images of all different aspect ratios.

Here is the code I am currently trying to use:

.woocommerce-product-gallery__image {
border: solid 5px #CCC;
background-color: #CCC;