I need help with my website!, Having trouble aligning jpegs with <h2> and <p> |
I need help with my website!, Having trouble aligning jpegs with <h2> and <p> |
martindean45 |
Feb 18 2024, 10:00 AM
Post
#1
|
Group: Members Posts: 1 Joined: 18-February 24 Member No.: 29,131 |
Hello all!! I really need help!!! What im trying to do is have 3 columns and on the top column Im wanting to place three separate image files and below each image im wanting to put a heading and a paragraph however im getting what is happening in the below image :
https://imgur.com/a/M0nUX7w My html and css is shown below (I will also include a file of the image as an attachment: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="./css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap" rel="stylesheet"> <title>My Website</title> </head> <body> <section id="features" class="introduction"> <div class="px-4 text-center border-bottom"> <h1 class="display-4 fw-bold text-body-emphasis">Welcolm to my Webpage</h1> <div class="col-lg-6 mx-auto"> <p class="lead mb-4">Hello my name is Martin Dean. Here you will find details about my hobbies, qualifications and various ways to contact me via social media!!!</p> </div> <div class="overflow-hidden" style="max-height: 100vh;"> <div class="container px-5"> <img src="./images/martindean.jpg" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy"> </div> </div> </div> </section> <!-- Title --> <div class="container"> <div class="row"> <div class="column"> <img src="./images/dice2.jpg"> </div> <div class="column"> <img src="./images/console.jpg" alt="picture of dice"> </div> <div class="column"> <img src="./images/dice2.jpg" alt="picture of dice"> </div> </div> <div class="row"> <div class="column"> <h2>title1</h2> <p>description</p> </div> </div> <div class="column"> <div class="content"> <h2>title1</h2> <p>description</p> </div> </div> <div class="column"> <div class="content"> <h2>title1</h2> <p>description</p> </div> </div> </div> </div> <!-- Features --> <section id="features"> </section> <!-- Testimonial --> <section id="testimonial"> </section> <!-- Pricing --> <section id="pricing"> </section> <!-- Footer --> <section id="footer"> </section> </body> </html> CSS: .introduction {background-color: #8CB9BD; } h1 {font-family: "Oleo Script", system-ui; font-weight: 700; font-style: normal;} .text-center { text-align: center!important; } .container { display: flex; flex-wrap: wrap; } .row { flex:1 0 100%; display: flex; flex-wrap: wrap; } .column { flex: 1 0 3.33%; margin: 10px; box-sizing: border-box; } img { max-width: 100%; height: auto; } |
coothead |
Feb 18 2024, 04:08 PM
Post
#2
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there martindean45,
coothead |
Lo-Fi Version | Time is now: 4th October 2024 - 08:16 PM |