How to resize an image to cover on a half row
Hi Everyone,
I have a row where I want the left side to be text and the right side to be a photo > Full cover.
How can I adjust the settings so that it is compatible on all devices and it will not get off screen when you switch device
Comments
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