1

I have always told my designer that he should ignore any web rules and think/design like the print designer he is. And it is my job to overcome the issues that arise because of this.

Every now-and-then an issue crops up that I think is solvable, but I'm not sure how best to approach it but I think it would be fun to try. See the below mock to understand the question.

American Massage Training Mock

This mock has a content area and a sidebar, but in part of the page there is a breakout image. I can make an image break out of the content by using negative margin. Here's a very simple example:

.full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

The demo is here: https://codepen.io/Balloony/pen/ZPXdEg

Using this technique breaks the image out of the main container, but it does not break into the sidebar container, thus it simply goes over the top (or underneath).

Can anyone think of a way to solve this problem? I'm ok with using JavaScript or PHP or any other method.

| improve this question | |
  • github.com/ftlabs/ftcolumnflow just for my memory as this may be the solution – Eoin Mar 12 '19 at 13:06
  • 1
    Thanks for the image update. So you basically want the large image to break in between the sidebar? similar to this: labs.ft.com/ftcolumnflow/5.html ? – Lodder Mar 12 '19 at 13:13
  • Yes indeed, but ftcolumnflow seems to use static sizes at first glance. So not responsive. But yes, in principle that is the way. – Eoin Mar 12 '19 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.