Softpress Cuisine template shown in the link uses a background image on the main page.
The question I have is best viewed on a large browser. If you shrink the browser the picture shrinks pretty well as you go but when it reaches the minimum width on screen (lower breakpoints) the image clips off at the right hand side. Is there a way to prevent this without using a media call for the lower breakpoints.
Just that some images will require not clipping in this manner on tablet/phones
Regards
Trevor (N I)
The documentation for the image on the template is here:
The large image on the main pages is a background image applied to the item called BodyWrapper1 (the images have been removed from this template for licensing reasons). To add new images:
Select the item BodyWrapper1 by clicking on it or select the item in the Site Panel. To quickly show the items in the Site Panel, click the word Site at the top of it. Click it again to go back to the site overview.
Go to the Item Appearance Settings pane of the Inspector palette
Open the Image popup in the Background section to choose a new image
Note that the item has CSS style applied to it to make the image fill the flexible item. This means you shouldn’t need to make the image High Resolution, just make sure it’s more than twice the dimensions of the HTML item at its largest (so roughly 2000px by 1000px). Also note that the image will look better if it’s the same aspect ratio as the item.
Have you tested this on an actual mobile device yet? I have found the desktop browser squeezed down to mobile size to be a poor predictor of how things will go on an actual device. For one example, Safari with the sidebar enabled is able to resize smaller than the original iPhone in portrait mode, so the YAGNI* rule applies there. For another, iPhone’s version of Mobile Safari does some odd things with font sizes to improve readability, and desktop Safari cannot preview that for you either. If you don’t own an iPhone, you can register as an Apple Developer (free) and download Xcode and its built in iOS simulator, which does a great job of both of these issues.
On your page, have you set the background image to align center/center, and background-size cover? Adding both of those to the existing code should give you some additional help in making the layout stay put at the smallest sizes.
Walter
On Oct 1, 2015, at 5:48 AM, t50ufo email@hidden wrote:
Softpress Cuisine template shown in the link uses a background image on the main page.
The question I have is best viewed on a large browser. If you shrink the browser the picture shrinks pretty well as you go but when it reaches the minimum width on screen (lower breakpoints) the image clips off at the right hand side. Is there a way to prevent this without using a media call for the lower breakpoints.
The template uses the CSS background-image property (or background for a DIV in Freeway).
So this matter enables you to simply add/exchange an alternative cropped image for lower breakpoints and is to take into account for ALL images applied by this method.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
That worked Thomas - I was not aware that the background image could use a different size image at the breakpoints. The original and a smaller version seems to fix my problem with clipping image.
Thanks too to Walter for pointing out viewing problems. I normally put up a test page to check on pad and phone. Thanks to you both for the advice, as always - very much appreciated.
Trev
freewaytalk mailing list
email@hidden
Update your subscriptions at: