Responsive images

[padr78]

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 ?

[Chinmoy Paul]

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.

[padr78]

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)

[Davinder Singh Kanith]

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.

[padr78]

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.

[Davinder Singh Kanith]

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/)

[padr78]

Hi Davinder

I have sent you requested details via the contact form

[Davinder Singh Kanith]

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.

[padr78]

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

[Davinder Singh Kanith]

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