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.

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.

What would be the best way to make this responsive? Also what are some good resources for beginning to learn responsive design? Thanks.

Code: <https://jsfiddle.net/6w7uj3a9/>

```
   .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; }

```

The image to the right is just a placeholder I have a preferred image saved.