Lemariku / Use-case section and right aligned media component

[johnsBeharry]

Estimate: 
Due: 2018-04-30

Scenario: media--right is aligned right on desktop
Given div.section is a child of .projectDetails
And figure.media--right is a child of div.section
And I am on a screen >= 960px
When I preview the layout in the browser
Then I see figure.media is aligned to the top of div.section
And it touching the right of the viewport
And it does not overlap .projectDetails

NOTES

[micey969]

@johnsBeharry , this is what I currently have but it is currently hiding the projectMeta.

This is my code:

 .section{
        .media--right {
          @media only screen and (min-width: 960px){
            position: absolute;
            right: -7vw;
            top: 0;
            width: 25vw;
            margin-top: 60px;
          }
        }
      }

[johnsBeharry]

@micey969 could you post your html or link to a branch with it?

[micey969]

Correction, that wasn't my inital code. I had

 .section{
    @media only screen and (min-width: 960px){
            position: absolute;
            right: -7vw;
            top: 0;
            width: 25vw;
            margin-top: 60px;
     }
}

Because media--right is supposed be aligned to the top of section. With the other one, it was outside of it.

[micey969]

I created a branch called 32-align-media-right. I used lemarkiu.html as my template to try it out on.

[johnsBeharry]

@micey969 really sorry I should have written / illustrated the task better - sorry still trying to figure out how to write design tasks in gherkin.

Please tell me if the mockup below clears things up. The div.section will be used to separate different content in the case study, they will contain text and also a figure.media--right (your first css code snippet was correct).

There will always be a few paragraphs at the beginning of a case-study, and div.section will be mainly placed after the intro. So the problem you described would not show up unless we try to use this media right in the intro section - which isn't planned at the moment.

[johnsBeharry]

@micey969 here's some other mockups for reference - left is desktop, right is how figure.media--streched.media--right it will display on mobile.

[micey969]

Okay, then. How about this?

And

However, I wrapped the text section in a div and applied float: left for it to go that way. So i needed a clear: both div at the bottom of section. So that when you have multiple sections, the images will show up