CODEWITHSUNDEEP
cssuser-interfacelayout
Sammi
Sammi

Reputation: 286

Stacking responsive images in a container on different screen widths

So I have this layout at a larger display:

https://i.ibb.co/5kqvDZj/big.png

I started with building the mobile version

https://i.ibb.co/CsdS9mS/small.png

Now the two images should gradually move away from each other as the display gets larger, and some re-ordering will also happen, so the images come first before the text.

The following is my current code, and everything gets messed up as soon as I stretch the screen size..

    section.story
      .container
        .story__head
          p.story__date Since 2010
          h4.story__title Victoria Blend

        .story__images
          .story__image-container
            .story__shape
              svg(width='78', height='263', fill='none', xmlns='http://www.w3.org/2000/svg')

            .story__image-wrapper
              img(src="assets/feat3.png")
          img.story__image(src="assets/feat4.png")
          h5.story__subtitle Designer Story

        .story__details
          p.story__text text goes here...........
          button.story__button.action-btn Discover the Story Behind

.story {
  margin: 24px 0;
  background: $gray-lightest;
  padding-top: 20px;

  &--no-bg {
    background: $white;
  }

  &__date {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 10px;
  }

  &__head {
    margin: 4px 0 16px 0;
  }

  &__title {
    text-transform: uppercase;
    font-size: 36px;
    line-height: 40px;

    @media only screen and (min-width: 650px) {
      font-size: 43px;
      line-height: 71px;
    }
  }

  &__images {
    position: relative;
    min-height: 515px;
  }

  &__image-container {
    position: absolute;
    max-width: 50%;
    top: 33%;
    transform: translateY(44%);
    z-index: 400;
  }

  &__image-wrapper {
    position: relative;
    display: block;
    height: 100%;
  }

  &__image {
    position: absolute;
    max-width: 90%;
    right: 0;
  }

  &__shape {
    position: absolute;
    z-index: 600;
    position: absolute;
    z-index: 600;
    left: 0;
    bottom: -130px;
    transform: translateX(-50%);

    svg {
      transform: scale3d(0.4,0.4,0.4);

      @media only screen and (min-width: 650px) {
        transform: scale3d(1,1,1);
      }
    }
  }

  &__subtitle {
    position: absolute;
    bottom: 6%;
    left: 37%;  
    font-size: 16px;
    line-height: 33px;
    font-weight: normal;
    letter-spacing: 6px;
    z-index: 500;

    @media only screen and (min-width: 650px) {
      font-size: 20px;
      letter-spacing: 12.5px;
    }
  }

  &__details {
    margin-top: 12px;
  }

  &__text {
    line-height: 23px;
    font-size: 14px;
  }

  &__button {
    margin: 20px auto 0;
  }
}

Here's a full fiddle: https://jsfiddle.net/mests/Lcoxwjet/2/

I would also appreciate any comments regarding any part of the code. I really need any suggestions.

Upvotes: 0

Views: 45

Answers (2)

Abdelrahman Ismail
Abdelrahman Ismail

Reputation: 144

This is a tricky layout choice, I will try to help you with. First, we should not use transform in align images, because it executes in the composition step in the browser rendering pipeline|, hence it would not respect the layout, causing the overlap you are facing.

My suggestion here: that you align one image to the top right of the container, and the other to the bottom right. and based on the container width and height the images should be aligned.

  .story__image-container {
    position: absolute;
    bottom: 0;
    left: 0;
  }

 .story__image {
    position: absolute;
    right: 0;
    top: 0;
  }

To make the images resizing with the container width, we will add for each one a default width, relative the container width, and maximum absolute value to prevent it from being too big.

  .story__image-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    max-width: 300px;
  }

 .story__image {
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
    max-width: 400px;
  }

You will face another issue, the hight of the container, how to make it relative to its width? you can use padding-top with a percentage value, but this way you can not set a maximum value to the height and will be very big on desktops (you can use a media query for that, but I do not suggest this). so here I will make the container height relative the viewport width, and a maximum absolute value.

 .story__images {
    position: relative;
    height: 120vw;
    max-height: 700px;
  }

Here is an updated version of your fiddle, with my suggested solution: https://jsfiddle.net/Abdelrahman3d/d7xLby5w/2/

I think you will need to adjust the width/height values to suit your design needs, but you got my main idea.

Upvotes: 2

Absi
Absi

Reputation: 30

Styling from scratch for both desktop and mobile browsing is like reinventing the the wheel from beginning. I recommend using framework that facilitate this task for you like Bootstrap.

Upvotes: -1

Related Questions