Hi tuanphan,
Thank you for your message. The site is not published yet, I will send you the URL and Password via message.
I have found a somewhat working solution, however, it is not perfect yet.
--------------------------------
@media only screen and (min-width: 768px) {
[data-section-id] .section-background {
width: 50%;
}
[data-section-id] .content-wrapper {
width: 50%;
margin-left: 50%!important;
min-height: 95vh !important;
}
}
--------------------------------
Whilst “min-height: 95vh !important;” does the job more or less, it still crops the image or zooms in depending on screen size.
Essentially, I am trying to achieve the following (please see the image attached named “Example”):
The image has an aspect ratio of 3/2 (1750 pixels in height and 1167 in width). I’d like the image to scale to 50% of the screen's width and the section height to be adjusted (increased) dynamically to the image's height, so that the image is not cropped or zoomed in any form or on any display.
Thank you for having a look.