Step 20: Mobile Styles When the user views the page on a mobile device, we don't want the label elements to appear to the left of the input elements because that takes up too much horizontal space. We need to adjust our layout to be more vertical. Create a media query for screens with a maximum width of 767 pixels. Inside the media query, add a rule for any label elements inside the form element with the id registration that removes the float, sets the width to 100%, and aligns the text to the left. Add a rule inside the media query for any input element inside the form element with the id registration that removes the float and sets the width to 100%. Because we set specific widths for the input elements that appear on a single row, we need to override those settings in the mobile view. Add a rule inside the media query for the input elements with the ids city, state, and zip inside the form element with the id registration that sets the maximum width to 100%. Add a rule inside the media query for the label elements with class packageLabel inside the form element with the id registration that adds 50% of the current text size to the top and bottom margins, and removes the left and right margins. Add a rule inside the media query for the label element associated with cardType that sets the line height to normal and adds 50% of the current text size to the top margin. Add a rule inside the media query for the fieldset element with the id cardType that sets the width to 100%. Add a rule inside the media query for the element with the id expirationMonth that sets the width to 50% minus 100% of the current text size. Add a rule inside the media query for the element with the id expirationYear that sets the maximum width to 50%. Add a rule inside the media query for the element with the id securityCode that sets the maximum width to 100%. Add a rule inside the media query for the element with the id submitButton that sets the width to 100% and removes the left margin.
Step 20: Mobile Styles
When the user views the page on a mobile device, we don't want the label elements to appear to the left of the input elements because that takes up too much horizontal space. We need to adjust our layout to be more vertical.
Create a media query for screens with a maximum width of 767 pixels. Inside the media query, add a rule for any label elements inside the form element with the id registration that removes the float, sets the width to 100%, and aligns the text to the left.
Add a rule inside the media query for any input element inside the form element with the id registration that removes the float and sets the width to 100%.
Because we set specific widths for the input elements that appear on a single row, we need to override those settings in the mobile view. Add a rule inside the media query for the input elements with the ids city, state, and zip inside the form element with the id registration that sets the maximum width to 100%.
Add a rule inside the media query for the label elements with class packageLabel inside the form element with the id registration that adds 50% of the current text size to the top and bottom margins, and removes the left and right margins.
Add a rule inside the media query for the label element associated with cardType that sets the line height to normal and adds 50% of the current text size to the top margin.
Add a rule inside the media query for the fieldset element with the id cardType that sets the width to 100%.
Add a rule inside the media query for the element with the id expirationMonth that sets the width to 50% minus 100% of the current text size.
Add a rule inside the media query for the element with the id expirationYear that sets the maximum width to 50%.
Add a rule inside the media query for the element with the id securityCode that sets the maximum width to 100%.
Add a rule inside the media query for the element with the id submitButton that sets the width to 100% and removes the left margin.
AI-generated content may present inaccurate or offensive content that does not represent bartleby’s views.
Unlock instant AI solutions
Tap the button
to generate a solution
