Displaying images in new line using HTML/CSS

Question

I'm trying to display 2 images in a line below a line of text, but they show up in the same line. I tried using the "clear: both" property and "display: block" property in the CSS style for the images. What am I missing?

I included a screenshot of what it looks like as well as the relevant section of the HTML code and the complete CSS stylesheet. The "media" class is what I am using for the images. They are showing on the same line as the

section under the "Contacts" div.

screenshot of website here

 body { background-color: #63a4ff; background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%); }.fadeline { background-color: white; margin: 25px 20%; width: 60%; height: 1px; }.fadeline.white { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }.fadeline.black { background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }.row { background-color: white; margin: 0% 15% 0% 15%; padding-bottom: 15%; padding-top: 50px; color: #586E95; }.header { text-align: center; padding-left: 40%; } #about { text-align: center; } p { margin: 0 auto; display: block; clear: both; }.example { margin: 0 auto; background-color: white; border: 1px solid black; border-radius: 10%; outline: none; width: 20%; } a, a:hover { text-decoration: none; display: block; } img { max-height: 90%; max-width: 90%; }.media { height: 55px; width: 55px; display: block; margin: 0 auto; }

 <div id="contact" class="row text-center"> <h1 class="header">Contact</h1> <div class="fadeline black"></div> <p> Want to connect? Reach out with Facebook or LinkedIn.</p> <div class='media'> <a href='https://www.facebook.com/siddharth.gampa/'><img src='https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512'></a> </div> <div class='media'> <a href='https://www.linkedin.com/in/siddharth-gampa/'><img src='https://image.flaticon.com/icons/svg/174/174857.svg'></a> </div> </div>

Answer 1

It looks like they're not below the text because they're in the same div with the row class. Put them in a div below the row and it should work

Answer 2

Add a class to both images. For example Class="img-1" And Class="img-2" Make their position relative then push one of the images to the right. It may take some fiddling to get the locations correct

Answer 3

If you place both images in one div with the class .media then set that div to display: flex that should work.

Check out the example code below by clicking the Run code snippet

 body { background-color: #63a4ff; background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%); }.row { display: flex; flex-direction: column; background-color: white; margin: 0 15%; padding: 50px 0; color: #586E95; }.text-center { text-align: center; }.heading { text-align: center; }.fadeline { background-color: white; margin: 25px 20%; width: 60%; height: 1px; }.fadeline.white { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }.fadeline.black { background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }.media { display: flex; justify-content: center; width: 100%; } a img { width: 40px; margin: 0 10px; }

 <div id="contact" class="row text-center"> <h1 class="heading">Contact</h1> <div class="fadeline black"></div> <p> Want to connect? Reach out with Facebook or LinkedIn.</p> <div class='media'> <a href='https://www.facebook.com/siddharth.gampa/'> <img src='https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512'> </a> <a href='https://www.linkedin.com/in/siddharth-gampa/'> <img src='https://image.flaticon.com/icons/svg/174/174857.svg'> </a> </div> </div>