Loopstudios landing page

Community feedback

• 

  BT738844•680

  @BT453567Posted 4 months ago

  Hello there

  With regards to the VR section ("The leader in interactive VR"), this could be implemented with grid.

  At the moment when you reduce the window size, the VR text box goes out of alignment with the image.

  To implement with grid, if you setup 4 columns, where the image spans columns 1-3 and the text box spans columns 3-4.

  Ensure the text box has a higher z-index, is positioned at the bottom of the column and the background colour is transparent so you can see the image around the text box.

  Grid is the best way to implement "Our Creations" in my opinion. Try adding support for mobile screen with the following in CSS:

  @media only screen and (max-width: 767px) { .. }

  You can also change to the mobile image when the screen reduces by the following in HTML:

  <picture> <source srcset="./assets/images/mobile/image-pocket-borealis.jpg" media="(max-width: 767px)"> <img class="creations-section__grid-image" src="./assets/images/desktop/image-pocket-borealis.jpg" alt=""> </picture>

  Hope that helps

  0