queue  45
support
Results 1 to 7 of 7

Thread: Block the highlights images on the other pages

  1. #1

    Block the highlights images on the other pages

    Hi,

    Is there a way to block the highlights images on the top of the pages to keep the same proportions on every screen (Iphone, 13", 27", etc) ?

    Thank you very much

  2. #2
    Support Anand's Avatar
    Join Date
    Jan 2014
    Posts
    9,896
    Hi,

    Sorry I am unable to follow your question. Can you please elaborate a bit?

  3. #3
    Sorry, how can I have the principales pic always with the same proportions on every screens to avoid that :

    http://i.imgur.com/GVZ6tDX.png
    http://i.imgur.com/XA8lMBH.png

    Because for now, it is impossible to frame them... They're moving from a device to another (because it is responsive). But can we just block them ? I don't want them to move from a device to another.

    Thank you

  4. #4
    Support Anand's Avatar
    Join Date
    Jan 2014
    Posts
    9,896
    Hi,

    Unfortunately that isn't possible.

    Theme needs to cover the full screen while keeping the image dimensions in proportion, so that it doesn't look skewed or stretched.

    To do that it centers the image and displays it, so some portion of the image is bound to get cut off.

    For eg: say you are using 1920 x 1080 image , to display the full image on an iPhone 5 , the width of the image will need to be resized to 320px

    doing that the resulting height of the image will be 180px. Now the height of iPhone 5 in portrait mode is 480px , balance of the screen (480 - 180) will be blank


    Having said that, you can add the following to Custom CSS field

    Code:
    .responsive-bg { background-size: contain; }
    This will ensure that the full image is visible across all screen sizes, but on wider screens it will leave a blank white portion on either side of the image.

  5. #5
    Support Anand's Avatar
    Join Date
    Jan 2014
    Posts
    9,896
    Hi,

    Unfortunately that isn't possible.

    Theme needs to cover the full screen while keeping the image dimensions in proportion, so that it doesn't look skewed or stretched.

    To do that it centers the image and displays it, so some portion of the image is bound to get cut off.

    For eg: say you are using 1920 x 1080 image , to display the full image on an iPhone 5 , the width of the image will need to be resized to 320px

    doing that the resulting height of the image will be 180px. Now the height of iPhone 5 in portrait mode is 480px , balance of the screen (480 - 180) will be blank


    Having said that, you can add the following to Custom CSS field

    Code:
    .responsive-bg { background-size: contain; }
    This will ensure that the full image is visible across all screen sizes, but on wider screens it will leave a blank white portion on either side of the image.

  6. #6
    It is not possible to hame same result as this site ? : http://www.carrenet.com/

  7. #7
    Support Anand's Avatar
    Join Date
    Jan 2014
    Posts
    9,896
    Hi,

    The example site uses the image using an <img> tag and not as a CSS background image.

    Despite of that on some resolutions the image is cut, see the following screen grabs.

    http://i.imgur.com/bUxHHo5.jpg

    http://i.imgur.com/7PdY7in.jpg