Created gird for new page layout of Display Package Page for redesign

[sophiamfavro]

Background

For the redesign of the display package page, the new layout follows this image

Solution

In order to achieve this I used Bootstraps grid feature to create this new layout. Here is the code needed to achieve this structure without any of the page content. Below it is the output that the code creates


I used this code as a guide for editing the DispayPackageV2.cshtml as to not impact the existing page. After completeing my changes, the page now looks like this

The mobile view looks like this

Testing

To check that my solution had worked I ran the page and

• checked that there were no errors in the .js by looking at the console
• collapsed the code so that only the row/column divs were shown and compared to the simplified structure code above
• Inspected the page and hovered over the sections to see that all the content was in the correct column/row

Recommend using hide white spaces changes when reviewing

[loic-sharma]

Looks great!