MyBB Community Forums

I'm having some issues putting three images, side by side in the header. (I created a lower header just for the pictures). 

First, once I added the images to the header, it pulled the upper and lower panel into the header and narrowed them.

Second, the images are not coming out the same height. I thought they would. Am I mistaken? Are they supposed to be the same height or size as each other? Or do I have to make all the images the same height before loading them?

The two smaller images in the header are actually much bigger than the center one, but they show up smaller.

This is the code I used.

Quote:<div id="header">
<div class="lower">
<div class="wrapper">
<div class="row">
  <div class="column">
    <img src="images/wave3.png" alt="The Great Wave" style="width:100%">
  </div>
  <div class="column">
  <img src="images/Goals.png" alt="Goals" style="width: 100%">
      </div>
  <div class="column">
    <img src="images/sky.png" alt="Sky" style="width:100%">
  </div>
</div>

and

Quote:* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

If you would like to take a look. Use Test User PW:MyBB!@34 Test Theme

https://theprosestylist.net/

Thank you for your time. It is appreciated.

on which theme you are trying to put the images below header ?

(2020-02-22, 04:36 AM).m. Wrote: [ -> ]on which theme you are trying to put the images below header ?

Test Theme

^ test named theme is not available for logged in users / guests

(2020-02-22, 04:53 AM).m. Wrote: [ -> ]^ test named theme is not available for logged in users / guests

My apologies. It should be available now.

Hi,

I would change your HTML, and your CSS as this:

In the header  template of the Test theme, search for:

						<div class="row">
  <div class="column">
    <img src="images/wave3.png" alt="The Great Wave" style="width:100%">
  </div>
  <div class="column">
	  <img src="images/Goals.png" alt="Goals" style="width: 100%">
      </div>
  <div class="column">
    <img src="images/sky.png" alt="Sky" style="width:100%">
			  </div>
</div> 

And change it to:

<div class="row" style="height: 200px;display: flex;">
	<img src="images/wave3.png" alt="The Great Wave" style="max-width:33%;margin: 0 auto;">
	<img src="images/Goals.png" alt="Goals" style="max-width:33%;margin: 0 auto;">
	<img src="images/sky.png" alt="Sky" style="max-width:33%;margin: 0 auto;">
</div> 

Now it should work.

(2020-02-22, 09:39 AM)NoRules Wrote: [ -> ]Hi,

I would change your HTML, and your CSS as this:

In the header  template of the Test theme, search for:

						<div class="row">
  <div class="column">
    <img src="images/wave3.png" alt="The Great Wave" style="width:100%">
  </div>
  <div class="column">
	  <img src="images/Goals.png" alt="Goals" style="width: 100%">
      </div>
  <div class="column">
    <img src="images/sky.png" alt="Sky" style="width:100%">
			  </div>
</div> 

And change it to:

<div class="row" style="height: 200px;display: flex;">
	<img src="images/wave3.png" alt="The Great Wave" style="max-width:33%;margin: 0 auto;">
	<img src="images/Goals.png" alt="Goals" style="max-width:33%;margin: 0 auto;">
	<img src="images/sky.png" alt="Sky" style="max-width:33%;margin: 0 auto;">
</div> 

Now it should work.

Yes, it did. Thank you both.