Creating responsive page with image and content-CodePudding

I'm new to front-end I'm facing some problems with positioning stuff around and making it resposnive.

So far this is my code:

body {
    margin: 0;
    background-color: #353535;
}

.header {
    color: white;
    text-align: center;
    font-size: 20px;
    margin: auto;
    font-family: 'Inter', serif;
    font-weight: bold;
    width: 700px;
    height: 150px;
    background-color: #3C6E71;
    border-radius: 25px;

}
.header h1{
   margin:  3px; 
  }

.content {
  margin: auto;
  width: 50%;
  padding: 5px;
  text-align: center;
}

.content img {
  object-fit: cover;
  width: 500px;
  height: 400px;
  border: 3px solid white;
}

.content p{
  margin-left: 15px;
  display: block;
  margin: 2px 0 0 0;
  color: white;
  font-family: 'Inter', serif;
    font-weight: bold;
}
.button {
  background-color: #D9D9D9; 
  border: none;
  color: #D00000;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div >
    <h1>We found trip that suits you</h1>
        <h1>Kieve Summer Camp</h1>
        <h1>Nobleboro, USA</h1>    
</div> 
    <div >
       <p>
Located on the shores of Lake Damariscotta in Maine, Kieve has been building boys' character and teaching them wilderness skills since 1926. With a heavy focus on excursions—only half the campers are usually on-site, with the other half exploring during the regular camping trips and half-day adventures—activities also include an extensive ropes course, lacrosse, baseball, woodworking, riflery, fishing, swimming, paddle boarding, windsurfing, sailing, tennis, soccer, and photography. A more traditional camp where each boy has a duty, plus takes part in daily activities such as a flag raising and evening prayer, campers are encouraged to try new activities and widen their comfort zones. A sister camp around the lake—Wavus Camp for Girls—operates under a similar philosophy, teaching bravery, resilience, and a reverence for nature.
        </p>  
        <img src="https://images.pexels.com/photos/7772721/pexels-photo-7772721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Italian Trulli">  
 </div>
 <button >Save</button>
 <button >Randomize again</button>
</body>
</html>

You can see how I tried so far, and this is what I want to achieve: https://www.figma.com/file/lqy0NTOiakaxeG5HoJk50f/Untitled?node-id=0:1.

I know its basic but whatever I try and somehow I make something work other stuff gets bad and so on.

CodePudding user response：

I'd use css grid to get the image and buttons next to the text.

Also wrap the buttons together with the image in a div (I gave it the class right-col):

.content {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  gap: 1em;
}

.right-col {
  justify-self: start;
}

You'll probably also want to wrap all your code in a wrapper with a max width and make the header and content 100%.

CodePudding user response：

I would try it with

body {
    width:100%;
}

Hope I could help you... If I didn't understand correctly, please just say!

Kind regards, Dimento