Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 7, 2016 at 10:43 pm #579263
    Micheal0424

    I have a mobile redirect (This plugin works great for redirecting a single page to a link of your choosing, in my case a page within the website that will be designed with a mobile device in mind: ‘Equivalent Mobile Redirect’) for a page so I can design that additional page with mobile users in mind.

    I want the page that is being designed for the mobile user to display background images (background images in the color section element) better. I have provided a link to show how it looks on the mobile device, it is zoomed in and looks bad on the mobile device.

    How can I make the images look good on the mobile device if I am specifically designing that page for the mobile device and am not worried about how it looks on the desktop?

    I tried putting a smaller image in the background but it still zooms in and looks bad on that page when viewing on a mobile device. I have tried different ways but am at a loss.

    I don’t know which direction to approach this problem from now, am I able to put a code in the ‘For Developers: Section ID’ that will work for that element to keep the with to a sufficient maximum or is there another way to accomplish what I am trying to do?

    I am trying to make a background image (color section element) look good on a mobile device, that is my goal with the page.

    Your help is greatly appreciated here, I am stuck.

    Thank you.

    February 9, 2016 at 12:23 pm #580329
    Ismael

    Hi Micheal0424!

    Thank you for using Enfold.

    Note that the background-size property of the background in the color section is set to “cover” in order to keep its aspect ratio but it may cut off parts of the images. You can set the css background-size property to 100% but it will distort the image. I checked the test page and it doesn’t look that good on portrait mode but the image is almost entirely visible on landscape mode. Try to resize the image relative to the screen resolution of the target mobile device. For example, if you want most of the image to be visible on an iPhone 5 portrait mode, resize the image to 1136x640px. Set the Background Attachment settings to fixed.

    And keep in mind that the color section background is not meant to showcase an image. It is meant to provide more context to the content.

    Regards,
    Ismael

    February 13, 2016 at 7:08 am #582632
    Micheal0424

    Thank you, that makes sense.

    I think I was trying to hard to find the perfect size and not focusing on the ratio of the image as much as I should have. I will focus on the ratio and accept the fact that the sides of the image will be lost, that is normal.

    Thanks again for your help.

    February 15, 2016 at 7:39 am #583143
    Rikard

    Hi,

    Glad we could help, please let us know if you should need any more help on the topic.

    Regards,
    Rikard

    June 21, 2016 at 11:56 pm #651784
    Micheal0424

    Thank you, this is resolved.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Images for background Color Section for mobile devices’ is closed to new replies.