Media querie FCC Survey stuck, media queries

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Hello codefriends, i already asked early help for this project, and thnx for answering so quick @pbartlett really appreciated!!! THNX~! aniway any one that feels like he can help me out, please reply. :pray: The problem:

i finished the survey project, but my media querie works on 0.1 in codepen mobile vers, but died and get differ layout in 0.5 0.25 exc~ already added a media querie after, but i can’t get it complished. so deleted that querie.'also tried flex, center exc~ in the sec, smaller px media querie i deleted… aniway a small question, and hope can be answered is:

wat means 0.5 and 0.25. px?.. i’m really confused, and my labels get destorted if made to 0.5 test layout. and 0.25… “maybe can’t get the right max-width…” hope someone can save me, from this 3 days already frustrating try’s to debug. here my pen with the rampage of media querie. (also i have 2 copie’s in my codepen of this project, and don’t know why. maybe it is because the frustration, i set it accidentally as new project… so strange…so i renamed the one finishing touch, to don’t get even more confused. also scare to hell to delete one of them, because a feel then they both get deleted… aniway this shows i really need some help. and thnx in advance!!! here pen: https://codepen.io/Den96/pen/BaBQwNE again thnx the one in the future that can help me out! :blush: hope this the right section for the topic… if not, i’m verry sorry, and feel free to place it in the right section, anyone that admin is of the forum.

I don’t understand the question. You have one media query in the Codepen you linked to and it works.

i finished the survey project, but my media querie works on 0.1 in codepen mobile vers, but died and get differ layout in 0.5 0.25

wat means 0.5 and 0.25. px?.. i’m really confused, and my labels get destorted if made to 0.5 test layout. and 0.25

What are these numbers you are talking about?

Can you try to explain the problem again and be more specific about the code you are talking about?

@lasjorg thnx for your reply, and sorry for the confusing… it works but if on mobile open codepen, and go to project, then below in the left corner you can shrink the page exc- and then the layout forms, or better said the labels fell out proportion. thnkyou for reply hope much clearer… :sweat_smile:

Oh, that is just the page zoom. It is not changing the actual viewport size just zooming the page.

I’m still not sure what the issue is you are seeing when zooming the page?

1 Like

thnx for explaining. yep the viewzoom makes the labels not aligned properly, they distort. one got more to the left, and one more to te right exc~


@lasjorg here 0.5 viewzoom. Hope this make much clearer

Hmm, I guess it is changing the viewport after all, sorry about that. But I would not use that, I’d use the browser device mode. Edit: oh you are on a phone, never mind.

Anyway, the elements are inline (label) and inline-block (input) elements so they will wrap on top of each other when there is no more room. Just like text does. If you have a long sentence and the text can not fit on one line it will wrap to a new line below.

1 Like

I’m not even sure that is what you are referring to. What you see at that screen size is the result of your media query.

@media screen and (max-width: 833px) {
  .userchoice-name {
    text-align: left;
    margin-left: 10.7%;
  }
  .userchoice-mail {
    text-align: left;
    margin-left: 10.7%;
  }
  .userchoice-dropdown {
    text-align: left;
    margin-left: 0%;
  }
}

If you want the age label and input to move like the other two you have to give it the same CSS.

.userchoice-number {
  text-align: left;
  margin-left: 10.7%;
}

That will align the labels the same, but the inputs will still not align. You can try controlling the width of the inputs to match. Just don’t use a fixed width, use either max-with or %

1 Like

thank you this actually solved my whole question. also thnx for the explanation! nope i use laptop browser mode, but to show you my problem, i just logged in verry fast on mobile codepen vers and take screenshot, and use the forum on mobile, after go back to desktop pc. i always test the layout on mobile. manythnx! cannot set solve, but it’s solve! and yes i actually reffering to the mediaquerie. i cannot solve with that zoom… but now i understand that part. and thnkyou i going to add the age label! :pray:t2: and thnx for the tips!!!

1 Like

No problem, just ask if you need more help. Happy coding.

1 Like