Responsive landing page with flex

Hi Jasham .

I will add more to my other communication in the slack channel:

• the body element is usually set to min-height: 100vh , this allows scrolling when content does not fit. To center the items in the body , do the following

body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

Further adjustments

.main {
/*  min-height: 97vh;
  display: flex;
  justify-content: center;
  align-items: center;  */
}
.image_wrap {
/*  width: 50%;
  height: 100%; */
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background-image: url(./images/image-product-desktop.jpg);
  background-repeat: no-repeat;
  background-size: cover; 
  flex: 1 1 50%;
}

.content_wrap {
 /* width: 50%;
  height: 100%; */
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding: 1.5rem;
  box-sizing: border-box;
  background-color: var(--White);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 50%;
}
.wrapper {
	/* height: 25rem; */
	display: flex;
	flex-direction: row;
	max-width: 35rem; // take note of this change
}

check and remove all set heights on the elements such as with the class wrapper

Hi @jasham. I wanted to congratulate you for the work you did on this challenge. Here's a little suggestion: use more semantic HTML tags. This would give better accessibility to the page. In this particular case, you could use tags like <article>, <footer>, <header>, <h1,h2,h3...>, among others. I hope this comment is useful to you. Greetings and congratulations for the challenge! Looks great.