Post

1 follower Follow
3
Avatar

ONTRApages - Mobile Responsive Background Image Doesn't Shrink

Permanently deleted user

Currently, when an ONTRApage is viewed on a mobile device, background images do not shrink with the rest of the page, but are cropped on the edges, making only a portion of the background image visible.  It would be great if the background image on ONTRApages shrunk with the rest of the page, rather than the image being cropped.

Completed

Official comment

Avatar

We have a new feature for ONTRApages that will help for mobile clients ... you can now edit the font, font face, font size, line spacing and the background padding for the mobile version using the "Mobile Display View" button in the editor. The same function now exists in ONTRAmail as well.

Details for ONTRApages at: https://support.ontraport.com/hc/en-us/articles/115008384948-Editing-Content-in-ONTRApages-Blocks (in the "Edit Mobile Fonts and Backgrounds" section)

For ONTRAmail, see https://support.ontraport.com/hc/en-us/articles/217882588#mobile-view

Frank Hagan
Comment actions Permalink

Please to leave a comment.

2 comments

0
Avatar

For the technical reason we choose to have the background image use the style "cover", it is a better choice in most applications. Background images really only have three settings, "contain", "100% 100%" and "cover". With "contain" the image is kept at the same aspect ratio and not distorted, but it will typically fill only part of the screen. "100% 100%" will stretch the image to fill the entire screen, but distorts the image. "cover" will crop the image on smaller screens, but keep the aspect ratio so the image is not distorted. Here are the three methods available, and how they look on a larger, 16:9 screen:

In choosing a background image, you can use the "mobile view" button or, in some browsers, resize the browser window to see how the background image is treated. Because of the limitations of HTML, choose an image that looks good at any size viewport. 



Frank Hagan 0 votes
Comment actions Permalink