Media queries to adjust web page layout

(You: I have this div which is showing all the elements in the div alongside each other.)

<div class="input_container">
    <label for="stock_symbol"></label><input id="stock_symbol" type="text"><br>
    <button id="submit_stock" type="submit" value="Submit" py-click="show_stock()">Show Details</button>
    <ul>
        <li>
            <a href="https://github.com/namuan/lazy-trader" target="_blank" aria-label="Github">Github</a>
        </li>
        <li>
            <a href="https://x.com/namuan_twt/" target="_blank" aria-label="Twitter">Twitter</a>
        </li>
    </ul>
</div>

how can I make sure that it renders correctly on a mobile screen?

ChatGPT: To ensure that the elements in the <div> are displayed correctly on a mobile screen, you can use media queries in your CSS to apply different styles based on the width of the viewport.

For example, you can use the following media query to apply a style to the elements in the <div> when the viewport is less than or equal to 500 pixels wide:

@media (max-width: 500px) {
  .input_container {
    /* Add your style rules here */
  }
}

Inside the media query, you can add style rules to adjust the layout of the elements in the <div>. For example, you can use the flex layout to stack the elements vertically:

@media (max-width: 500px) {
  .input_container {
    display: flex;
    flex-direction: column;
  }
}

You can also use the @media rule to specify different styles for different ranges of viewport widths. For example, the following media query will apply a style to the elements in the <div> when the viewport is between 501 and 800 pixels wide:

@media (min-width: 501px) and (max-width: 800px) {
  .input_container {
    /* Add your style rules here */
  }
}

By using media queries, you can ensure that the layout of the elements in the <div> is optimized for different screen sizes and resolutions.