u/nauseousdog

Hello! I am having an issue figuring out how to get a specific container on the "About" page of my website to stop wrapping its text on smaller screens. The container has a "sidebar" column (containing my name and some contact information) and a "main-content" column (containing one image). I'm fine with the margin, padding, and font size of this container as seen on my desktop. However, when I open the page on my phone, I would prefer for the container to adhere to the boundaries/width of the section itself without wrapping.

I don't know what to add to the "mobile responsive" area of my CSS sheet in order for the container to "shrink" on mobile for it to fit, or some other solution to prevent the wrapping. Please help - thank you!

Hello there! I have a horizontal display for my navigation links on desktop, and would like for them to display as a vertical column (left-justified) on mobile devices. I have attached the "mobile responsive" area from my .CSS sheet here:

 @media (max-width: 767px) {
  body {
    font-size: 18px;
  }
  

  .layout {
    width: 100%;
    grid-template: "header" auto "main" auto "leftSidebar"  auto "rightSidebar" auto "footer" auto / 1fr;
  }


  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }
  
  nav {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
  }
  

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
    margin: 0;
  }
}

Please let me know if I should supply any other code for more context about the issue. Nothing I've implemented seems to be working... (I am very, very new at this whole coding thing.) If it helps, I started off my site by using Petrapixel's layout generator. Here's the link to my website. Any help would be appreciated.