How to resize an image to cover on a half row

Comments

• marcel_deboer

  April 2019 edited April 2019

  https://imgur.com/a/6gz8SE1
• Pablo

  April 2019

  Hi,
  It's not possible to display two rows on mobile.
  If you want to have left item(column) with text and image on the right, both with 1/2 size, then it will wrap(push down) on mobile and it's normal behavior.
  Unfortunately, it's not possible to change that in theme options, you would have to edit theme files to achieve that, but we do not support that.
  
  But, if you want to cover it, you should do it this way:
  A final result: http://prntscr.com/n7fyar
  
  1) Create the same layout as I've done it here:
  http://prntscr.com/n7fyv3
  
  2) Edit section and apply the background color and the "Equal Height of Wraps" option.
  http://prntscr.com/n7fz6q
  http://prntscr.com/n7fzf2
  
  3) Edit the wrap on the right
  Upload the image as a "Background Image" and change the "Background Position" to "Right Center | No Repeat"
  http://prntscr.com/n7fzwt
  
  4) Edit the divider and apply some height in the Divider height field
  http://prntscr.com/n7g14f
  
  Of course, it will be cropped a little on smaller devices, but this is the only way to make it always covered (100% height, 100% width of the right wrap) - otherwise, you have to use the "Image" item(with removed default margin and padding) and we suggest to do it because it will not crop your image.
  Layout with image item:
  http://prntscr.com/n7ga2k
  
  Wrap with image settings:
  http://prntscr.com/n7gair
  
  Image item settings:
  http://prntscr.com/n7gbfa
  
  Also, I removed the background color from the section and I applied it on the "Wrap" with the text.
  Thanks

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• marcel_deboer

  April 2019

  Thank you very much Pablo! You the best