The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need help with spacing of divs
JUI43555
post 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.

IPB Image

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Apr 15 2023, 05:10 AM
Post #2


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(JUI43555 @ Apr 15 2023, 04:44 PM) *

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.

IPB Image

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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 16 2023, 11:39 AM
Post #3


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there JUI43555,

perhaps this example may help you in your quest...

index.html
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Keyboard information</title>

<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet" media="screen">
<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>page description</h1>

<div class="middle-container">

  <img src="https://dummyimage.com/256x480/af0000/fff/jpg" alt="">
  <img src="https://dummyimage.com/446x480/106d95/fff/jpg" alt="">

  <div class="middle-textbox-container">
   <h2>Mechanical Wireless Keyboard</h2>
   <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>
</html>

screen.css
CODE


body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5 sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: normal 1em /1.5 Barlow, sans-serif;
}
h1 {
    margin: 1em 0;
    font-size: 1.75em;
    font-weight: bold;
    color: #444;
    text-align: center;
    text-transform: capitalize;
}
h2 {
    font-size: 1.25em;
    font-weight: bold;
}
.middle-container {
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 90%;
    margin: auto;
    background-color: #fff;
}
img:first-of-type{
    width:16em;
    height:auto;
}
img:last-of-type{
    width: 27.875em;
    height:auto;
}
.middle-textbox-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.middle-textbox-container h2,
.middle-textbox-container p{
    margin: 0 1em 1em 0;
    text-align:center;
}
@media ( max-width: 67em ) {
img:first-of-type{
    width:12em;
  }
img:last-of-type{
    width: 20.9em;
  }  
}
@media ( max-width: 56em ) {
img:first-of-type{
    width:8em;
  }
img:last-of-type{
    width: 13.94em;
  }  
}
@media ( max-width: 44em ) {
.middle-container {
    display: block;
}
img:first-of-type{
    width:12em;
    margin: 0 1em;
}
img:last-of-type{
    float: right;
    width: 20.9em;
    margin-right: 1em;
  }
.middle-textbox-container{
   margin-top: 1em;

  }  
}
@media ( max-width: 41em ) {
img:first-of-type{
    width:8em;
  }
img:last-of-type{
    width: 13.9em;
  }  
}
@media ( max-width: 32em ) {
img:first-of-type{
    width:4em;
}
img:last-of-type{
    width: 6.97em;
  }  
}


You can view it here...

https://codepen.io/coothead/full/mdzPZdE

The page will work well right down to less than 300px page width. IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Apr 16 2023, 06:11 PM
Post #4


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(coothead @ Apr 17 2023, 12:39 AM) *

Hi there JUI43555,

perhaps this example may help you in your quest...

index.html
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Keyboard information</title>

<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet" media="screen">
<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>page description</h1>

<div class="middle-container">

  <img src="https://dummyimage.com/256x480/af0000/fff/jpg" alt="">
  <img src="https://dummyimage.com/446x480/106d95/fff/jpg" alt="">

  <div class="middle-textbox-container">
   <h2>Mechanical Wireless Keyboard</h2>
   <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>
</html>

screen.css
CODE


body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5 sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: normal 1em /1.5 Barlow, sans-serif;
}
h1 {
    margin: 1em 0;
    font-size: 1.75em;
    font-weight: bold;
    color: #444;
    text-align: center;
    text-transform: capitalize;
}
h2 {
    font-size: 1.25em;
    font-weight: bold;
}
.middle-container {
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 90%;
    margin: auto;
    background-color: #fff;
}
img:first-of-type{
    width:16em;
    height:auto;
}
img:last-of-type{
    width: 27.875em;
    height:auto;
}
.middle-textbox-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.middle-textbox-container h2,
.middle-textbox-container p{
    margin: 0 1em 1em 0;
    text-align:center;
}
@media ( max-width: 67em ) {
img:first-of-type{
    width:12em;
  }
img:last-of-type{
    width: 20.9em;
  }  
}
@media ( max-width: 56em ) {
img:first-of-type{
    width:8em;
  }
img:last-of-type{
    width: 13.94em;
  }  
}
@media ( max-width: 44em ) {
.middle-container {
    display: block;
}
img:first-of-type{
    width:12em;
    margin: 0 1em;
}
img:last-of-type{
    float: right;
    width: 20.9em;
    margin-right: 1em;
  }
.middle-textbox-container{
   margin-top: 1em;

  }  
}
@media ( max-width: 41em ) {
img:first-of-type{
    width:8em;
  }
img:last-of-type{
    width: 13.9em;
  }  
}
@media ( max-width: 32em ) {
img:first-of-type{
    width:4em;
}
img:last-of-type{
    width: 6.97em;
  }  
}


You can view it here...

https://codepen.io/coothead/full/mdzPZdE

The page will work well right down to less than 300px page width. IPB Image


coothead


Thanks very much, appreciate the help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 16 2023, 06:50 PM
Post #5


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743

No problem, you're vey welcome. IPB Image

Sidenote
There is no need to quote entire posts when replying to them. IPB Image
Instead, just include those bits. if any, that might be relevant to your post. IPB Image

coothead

This post has been edited by coothead: Apr 16 2023, 06:51 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 11:41 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC