Style .media--stretched to be flushed against #mainContent when it is a child of .projectDetails

[johnsBeharry]

  # Estimate:
  Scenario: On large sized devices .media--stretched component displays flushed to the left and right of #mainContent
    Given my viewport size is more than "960px"
      And "#mainContent" is equal to "70%" of the viewport width
      And "#mainContent" is positioned "30%" away from viewport left
     When I see a component with a class ".media--stretched"
      And it is a child of ".projectDetails"
     Then ".media--stretched" width is equal to "70%" of "#mainContent"
      And ".media--stretched" left position is equal to the left position of "#mainContent"

  # Estimate:
  Scenario: On medium size devices .media--stretched component displays flushed to the left and right of #mainContent
    Given my viewport size is "768px"
      And "#mainContent" is equal to "60%" of the viewport width
      And "#mainContent" is positioned "40%" away from viewport left
     When I see a component with a class ".media--stretched"
      And it is a child of ".projectDetails"
     Then ".media--stretched" width is equal to "60%" of "#mainContent"
      And ".media--stretched" left position is equal to the left position of "#mainContent"

  # Estimate:
  Scenario: On mobile .media--stretched component displays flushed to the left and right of #mainContent
    Given my viewport size is less than "768px"
      And "#mainContent" is equal to "100%" of the viewport width
      And "#mainContent" is positioned "0%" from viewport left
     When I see a component with a class ".media--stretched"
      And it is a child of ".projectDetails"
     Then ".media--stretched" width is equal to "100%" of "#mainContent"
      And ".media--stretched" left position is equal to "0%" away from "#mainContent"

[micey969]

Ok, does this pertain to the item templates or all pages?

[johnsBeharry]

@micey969 all pages is preferable.

[micey969]

In the journal, this is how its looks (sans background image)

[johnsBeharry]

@micey969 what should I be looking at in this screen shot?

[micey969]

The image in the journal is wrapped in a figure tag with the class ="active" and the padded div and was also given the img class ="fill". Basically have everything but the background image and this is how it looks.

[johnsBeharry]

@micey969 I've updated the acceptance criteria, can you have a look and tell me if it is better communicated?

[micey969]

@johnsBeharry and @esc758. I'm not 100% sure with the solution I did for this. Would it be possible for you to review and critique please?

[johnsBeharry]

@micey969 your margin needs to be calculated better, the solutions fails to meet the acceptance criteria fully - at least for desktop which is the first one I just tested. It might help to use the vw unit instead of % for them though.