Edit CSS for Plus Page mobile breakpoints

Background

When using the Plus Pages feature, I have noticed that the CSS styling is not ideally optimized for mobile breakpoints, particularly at 425px width.

When I view the Plus Pages on a mobile device, the layout and design do not ideally adapt properly and there are display issues:

To resolve this issue, we need to edit the CSS at the appropriate mobile breakpoint to ensure that the design and layout of the Plus Pages are properly optimized for mobile devices.

Specifically, we need to adjust the styles to ensure the Plus Page is responsive and displays correctly on all mobile devices.

This is a large issue, as these will be sent to users, who may interact with the Plus Pages on their mobile device.

Steps to Reproduce

Open the Plus Page on a mobile device (or Chrome’s device toggle tool set to 425px wide)

Observe that the layout and design do not adapt properly to the smaller screen size

Notice that some elements suffer from alignment issues (top profile image, page heading) & width issues (.proListBox .radioclass0; .FormDiv, etc)

The navigation of the page is not broken, but not ideal.

Expected Results

The Plus Page should display properly and be fully functional on all mobile devices.

The CSS styles should be optimized for mobile breakpoints, and the page should be responsive, adapting to the smaller screen size without any display issues.

Actual Results

The Plus Page demonstrates several display issues that affect the usability of the page.

The CSS styling needs to be edited to resolve these issues.

Affected Platforms

The issue affects the Plus Page feature on all mobile devices.

Solution

Review the media queries for the Plus Page CSS styles and make necessary adjustments to ensure that the design and layout are properly optimized for mobile breakpoints.

Some general ideas:

Allow the profile image & title to stack horizontally

Same with the product image & description(s)

Change .FormDiv .form-group {margin-bottom} to 20px

Change .label {margin-bottom} to 0px

Allow the content to stretch ~35px of the left & right edge

remove the {background-color_} of .MainBox

Test the Plus Page on various mobile devices (or Chrome’s device toggle tool) to ensure that the display issues are resolved and the page is fully functional.