Please help me keep my responses in their container

[kriegles]

https://codepen.io/kriegles/pen/mdOwKJL?editors=1100

I’m working on my survey form project and I’m having an issue with the user inputs within the form. So far I have them positioned approx where I want them (at least as far as I have gotten…css isnt finished) but when i squeeze the page to check responsiveness, the inputs break outside the parent form. All of the other components squeeze like I want them to.

1. am I using the grid layout appropriately? When I change the display of the inputs to flex, they will move accordingly but revert to all being stacked as opposed to my desired 3x2 layout.

2. it has been suggested in general to work from mobile size to begin and apply responsiveness to deal with viewport growth on other media. How do I start a project with mobile size in mind? is there a standard screen size to set?

3. should i be learning/applying @media in this case? I have seen it in examples but I’m wondering if its necessary for a simple project like this.

Looking forward to responses and any other feedback you may have. TIA

[DanCouper]

@kriegles

am I using the grid layout appropriately? When I change the display of the inputs to flex, they will move accordingly but revert to all being stacked as opposed to my desired 3x2 layout.

For example:

textarea {
  max-width: 100%;
}

The issue is that textAreas, by default, have a specific size they won’t go below. If you don’t override that, they’ll not shrink to fit. Hence you’re seeing them extend outside your containers (same thing happens with images, for example).

You’ll probably want to do a little more refining – at the minute, just doing the above will mean it will (naturally) fill the full width of he container at smaller sizes, whereas you’ll probably want a little bit of margin or padding.

@kriegles

am I using the grid layout appropriately?

You’re not really doing a lot with it. You need to think of it, once it’s set up, as a series of boxes you’re laying out. Inside those boxes, the contents can be sized in [for example] percentages to fill the boxes responsively, or you can apply flex to the content to lay them out, or whatever.

@kriegles

it has been suggested in general to work from mobile size to begin and apply responsiveness to deal with viewport growth on other media. How do I start a project with mobile size in mind? is there a standard screen size to set?

Your browser will provide multiple mobile-sized views for development purposes: open the dev console and select the responsive design mode. On Firefox it looks like this (the button for it is highlighted at the bottom right of the image):

Chrome is same icon, but it’s on the left hand side instead and it’s titled “Toggle device toolbar” instead of “Responsive design mode”.

@kriegles

should i be learning/applying @media in this case? I have seen it in examples but I’m wondering if its necessary for a simple project like this.

It’s just a get-out clause if you can’t make something resize naturally (or do anything at certain sizes, eg hide something when the screen is smaller). It’s not complicated at all, you are just saying (for example) “if the screen size is greater than 400px, apply these rules”

.thing-that-should-be-different {
  display: block;
}

@media screen and (min-size: 400px) {
  .thing-that-should-be-different {
    display: flex;
  }
}

Try not to overuse it because it makes your CSS more complicated, but it’s very common and useful and very easy to use, it doesn’t really matter whether your project is simple or not. As well as min/max sizes, it lets you do things like apply rules when the orientation changes (portrait/landscape) or do different things for hi-def displays, or apply styles only for when something is printed.

[kriegles]

Thank you for response. It gives me some direction to play with.

Big thanks for the dev tools info. I was not aware of that and downloaded firefox immediately. Is there a way to view the mobile view in preview while keeping my editor full size?

It makes sense that defining the size of my textarea in html would lock them into that size but its happening with my checkboxes even though they’re in a “container.” I will try formatting the grid/box while in mobile view mode then maybe use an @media to enlarge it over 600px?