Help in making messages responsive using PUG?

[mish]

Hi guys, I need help making my messages responsive. When I shrink the window the messages are too big. I tried media queries and playing with width but I can’t figure it out. I also tried flexbox but I’m not sure how I can keep the message layout.

heroku: https://my-mini-message-board.herokuapp.com/

CSS

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #8cc751;
}

h1,h2{
  text-align: center;
  font-size: 40px;
  color: #fff;
}

a {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.message{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.message-container{
  border-radius: 1rem;
  margin: 1rem;
  background-color: #fff;
  padding: .3rem;
  width: 800px;
}

.msgTopic{
  color: #606060;
  font-size: 22px;
}

.msgText,.msgUser{
  font-size: 20px;
}

.details-container{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  flex-wrap: wrap;
}

.details-container > p{
  margin: 2px;
}

.msgForm{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
  max-width: 400px;
  margin: auto;
}

.msgForm > input,textarea {
  width: 300px;
  margin: 1rem;
  padding: 10px;
  font-size: 20px;
}

.msgForm > textarea{
  height: 200px;
}

.msgForm > button{
  border-radius: 20px;
  border: none;
  background-color: #8cc751;
  color: #fff;
  font-size: 1.5rem;
  padding: .6rem;
}

PUG

extends layout

block content
  h1= title
  a(href='/newMsg').newMsgLink New Message
  .message
    each message in messages
      .message-container
        h3.msgTopic=message.topic
         hr
        p.msgText=message.text
        .details-container  
          p.msgUser=`- ${message.user}`
          p.msgDate=message.added

[bbsmooth]

You have the width on the .message-container divs set to 800px so when you narrow the view port less than 800px you’ll get a horizontal scroll bar. Perhaps instead of setting a width on these you set a max-width instead, which will allow them to shrink/widen as needed. In order for this to work with flexbox you’ll want to set the width to 100% instead.

[mish]

I tried changing my width to max-width, and my messages shrunk and didn’t expand.

I was able to make it work after removing flex-direction:column from .message and keeping my width to 800px…not sure if this is the best way but it works