title: Making split screen layout responsive
body: <p>I have recently begun to learn HTML and CSS and for practice I have been creating portfolio websites. I know the site I have made right now isn't much, but I have a question regarding the splitscreen layout.</p>
  
  <p>The question is: how can I make this responsive? By responsive I mean having the two sides equal in width and height no matter the screen size. I don't have much practice with responsive design. I know flexbox and that's about it. The two sections of the page are made in flexbox. I tried switching the units from px to ems, but that seemed to have no visible effect.</p>
  
  <p>What would be the best way to make this responsive? Also what are some good resources for beginning to learn responsive design? Thanks.</p>
  
  <p>Code: <a href="https://jsfiddle.net/6w7uj3a9/" rel="nofollow noreferrer">https://jsfiddle.net/6w7uj3a9/</a></p>
  
  <pre><code>   .sideone {
  display: flex;
  justify-content: flex-start;
  background-color: #3B3355;
  width: 900px;
  height: 720%;
  z-index: 2;
  border-right: 45px solid #3B3355;
  flex: auto;
  max-width: 900px;
  min-width: 900px;}
  
     .sidetwo {
  display: flex;
  justify-content: flex-end;
  background-image: url(city.jpg);
  filter: blur(3px);
  transform: scale(1.03  );
  background-size: 175% auto;
  width: 73em;
  height: 720%;
  z-index: 1;
  max-width: 73em;
  min-width: 73em; }
  </code></pre>
  
  <p>The image to the right is just a placeholder I have a preferred image saved.</p>