• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Responsive images

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Responsive images

  • This topic has 9 replies, 3 voices, and was last updated 6 years, 10 months ago by Davinder Singh Kanith.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 1, 2015 at 8:31 pm #372
    padr78
    Participant

    Hi all,

    I have a difficulty with the front-page banner image. My original issue was that a 1900*550 image was being cropped on a PC display. Chinmoy kindly provided me with the following code to ensure the full width of the image was visible

    .home-banner {
      background-size: contain!important;
    }
    
    Also you will change the height from 550 to 400 from dashboard > widgets page

    Chinmoy advised that the change to 400 was required to prevent a white gap appearing This worked fine on the PC screen but the problen now is that on smaller screens tablets / phones a large white gap is appearing and the buttons are misplaced.

    On some smaller screens the image does not appear at all which looks odd.

    Is there any way to avoid this problem ? or is there simply making images fully responsive ?

    July 2, 2015 at 2:25 am #374
    Chinmoy Paul
    Moderator

    Already there have CSS in @media queries section for banner image. You will edit the css as per your site design. Otherwise You can use my provided code for desktop only. Code will be like this:

    @media only screen and (min-width: 1024px) {
      .home-banner {
        background-size: contain!important;
      }
    }

    So this code only work on PC.

    Note: First you will remove the old CSS and then you will apply this new CSS.

    July 2, 2015 at 5:08 pm #380
    padr78
    Participant

    Thanks Chinmoy,

    That worked so that at least on the laptop/desktop a fullwidth image shows , whilst on smaller screens the image/buttons are readable.

    Am I right in thinking that it is because the image is used as a background ( so as to be able to use text/buttons ) that the compromise is needed (full width image really only available at one media size).

    If the image was inserted in a text widget to Home-Top rather than as the “Home Page Banner” widget we could then use an appropriate class and width: 100% CSS to have it scale according to screen size and still be full width ? ( although losing the text/button facility)

    July 2, 2015 at 5:18 pm #381
    Davinder Singh Kanith
    Moderator

    Background image used in “home banner widget” will look best in the default desktop view. Smaller screen size, it won’t be “really” full width (that’s the limitation of current setup of overlapping buttons).

    I understand, you want to directly give home-top widget area a background image. This can be done. To extend futher, you can show a different background image for home-top to mobile users which can be of smaller width and covering 100% of smaller mobile device size.

    But all this will require manual css changes.

    July 2, 2015 at 8:08 pm #382
    padr78
    Participant

    Hi Davinder,

    I finally got here.

    I have been testing a little more and I see that on an android phone (small) the banner image does not appear at all ( just the outline text and buttons).Is this intended behaviour /by design ? I had a look in the media queries section of the CSS file but could not see any specific item to not show the banner.

    Incidentally the same applies to the agency layout demo on your the SimpleProthemes site.

    July 3, 2015 at 3:35 am #383
    Davinder Singh Kanith
    Moderator

    Can you share full name of your Android phone? Also, your website url for more targeted help.

    P.S. If you do not want to share url publicly, email it (http://www.simpleprothemes.com/contact/)

    July 3, 2015 at 9:22 am #384
    padr78
    Participant

    Hi Davinder

    I have sent you requested details via the contact form

    July 3, 2015 at 12:17 pm #385
    Davinder Singh Kanith
    Moderator

    I got website checked on few Android phones. The background image is appearing fine. Can you delete internet cache from phone and check again? Also, if using very old phone – try using Chrome app (updated) for previewing website.

    I will send you email with more information.

    July 3, 2015 at 5:13 pm #386
    padr78
    Participant

    Davinder,
    Thank you for the images. I did as you said . With the stock browser the behaviour is still as noted ( even after a cache cleardown). However when as suggested I updated the chrome browser and used it the site behaves correctly. I have also had somevody check on an iPhone6 and it behaves correctly.

    It seems therefore that the issue is phone rather than site/FlexPro related.
    Thanks for your help

    July 3, 2015 at 5:19 pm #387
    Davinder Singh Kanith
    Moderator

    Hi, we cross test on various devices. Hence, I was surprised to see your query. Generally, such issues happen due to outdated browser not able to read newer CSS3 code.

    Welcome!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2022 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates