Survey Feedback & @media query not working!

Code Feedback
1

I’d like some feedback on my survey project. It’s not done, but I’d like to know if there’s any simplifications I can do to the basic structure before I add the final requirements and the final styling to pretty it up. I’m not worried about color palette right now.

There is a particular issue that keeps bothering me: my @media query’s “.contact” class isn’t changing the flex-direction from row to column. If you view the page as iPhone 5/SE (320px by 568px), you’ll notice how the radio buttons scrunch up against the <p>Primary contact preference:</p> element. In fact, the entire “.contact” <div> is turning into a structural mess. But do you see what I’m going for with my @media query?

I’m also trying to figure out how to grey out the “phone” radio button if the user omitted providing it.

2

Hi @danzyxr.

I assume you want the radio buttons to change from row to columns, yes? Currently, you’ve attached the “contact” class to the main <div>, but you have one more <div> in-between the main one and your radio buttons. Using flex only impacts the first level inside an item, so if you want the radio buttons to change from row to column, you need to connect a media query to the <div> in which the radio buttons are directly nested.

If you want the radio buttons themselves to stay in a row, but want them to jump to below the <p> item, then you need to nest the <p> item in a <div> as well.

Hope this helps!

3

I thought the child elements of “.contact” (the <div>'s) would stack accordingly, while the .“contact-buttons” would remain stacked in rows.
I tried adding the extra <div>, but it’s still not stacking correctly.
Notice if you manually change the base “.contact” class to flex-direction: column, it seems to work. But I only want that to happen from the media query, and it doesn’t.
This is what it looks like when I change the view to iPhone 5/SE.

survey
survey322×570 42.2 KB

4

I did a quick google search, and I’ve found a couple of results that suggest that flexbox doesn’t work correctly for browsers on iPhone 5/6 versions, such as the one below:

Is it possible that the issues comes from that problem? Have you tried out the site with other browser settings?

1 Like
5

I’m not sure about that. I get the same results if I just squish the width to 320px from the base responsive view. But I do appreciate the additional research. It’s not a huge deal.

Instead I could ditch the flex-direction: column idea and keep that particular section as a row. The objective here is to prevent that scrunching!

6

I found a better solution:

html,
body {
    width: 100%;
    min-width: 320px;
}

Easy enough. I updated the codepen.
I’d appreciate any other feedback!! :grinning:

7