Need help with spacing of divs |
Need help with spacing of divs |
JUI43555 |
Apr 15 2023, 03:44 AM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
I'm trying to accomplish the below image but I'm having issues the correct way to space out the divs to match the image below. Ive got the styling down but its just arranging those divs like the image im having trouble with. I feel like just adjusting the margin for each one seems like the wrong way to do it.
There is a whitespace margin of 165 pixels on the left and right. CODE <body> <div class="container"> <div class="phone-image"><img src="255x480" alt="" /></div> <div class="glass-image"><img src="445x480" alt="" /></div> <div class="middle-textbox"> <h1>Mechanical Wireless Keyboard</h1> <p>The Typemaster keyboard boasts top-notch build and practical design. It offers a wide variety of switches and keycaps, along with reliable wireless connectivity. </p> </div> </div> </body> |
JUI43555 |
Apr 15 2023, 05:10 AM
Post
#2
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
I'm trying to accomplish the below image but I'm having issues the correct way to space out the divs to match the image below. Ive got the styling down but its just arranging those divs like the image im having trouble with. I feel like just adjusting the margin for each one seems like the wrong way to do it. There is a whitespace margin of 165 pixels on the left and right. CODE <body> <div class="container"> <div class="phone-image"><img src="255x480" alt="" /></div> <div class="glass-image"><img src="445x480" alt="" /></div> <div class="middle-textbox"> <h1>Mechanical Wireless Keyboard</h1> <p>The Typemaster keyboard boasts top-notch build and practical design. It offers a wide variety of switches and keycaps, along with reliable wireless connectivity. </p> </div> </div> </body> Think i've nearly worked out. I reckon i was overthinking it. Any tips on the below CSS? CODE * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Barlow", sans-serif; } body { margin: 20px 165px; } .middle-container { display: flex; } .image1 { width: 255px; height: 480px; padding: 20px; } .image2 { width: 455px; height: 480px; padding: 20px; } .middle-textbox-container { display: flex; justify-content: space-evenly; align-items: center; padding: 20px; margin-left: 111px; } |
coothead |
Apr 16 2023, 11:39 AM
Post
#3
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there JUI43555,
coothead |
JUI43555 |
Apr 16 2023, 06:11 PM
Post
#4
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hi there JUI43555,
coothead Thanks very much, appreciate the help. |
coothead |
Apr 16 2023, 06:50 PM
Post
#5
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead This post has been edited by coothead: Apr 16 2023, 06:51 PM |
Lo-Fi Version | Time is now: 4th June 2024 - 10:01 PM |