Illdy jumbotron picture is very large when viewed on a smartphone

[sa3838]

Hi,

I originally posted this on the colorlib support forum and the support requested that I post this here.

The illdy jumbotron picture is enormous when I view my website on my smartphone. The support stated that it is probably a problem with the size of the picture that is used.

Here is the original post from the support forum:

https://colorlib.com/wp/forums/topic/homepage-is-not-displaying-correctly-on-mobile-version/#post-99381

Thanks for your help.

[sa3838]

i adjust the ratio size of the picture to 4:3, same results

[amadeann]

You may want to try and override:

`@media only screen and (max-width: 1024px)

header {

background-attachment: fixed !important;

}`

with:

`@media only screen and (max-width: 1024px)

header {

background-attachment: initial !important;

}`

This is however not an ideal solution - it will create another problem. The code was added on December 13, 2016 to fix the issue with Jumbotron image not being displayed on iOS:

https://github.com/puikinsh/illdy/issues/10

When I test this in dev tools in chrome & firefox the background image works fine, but I am pretty sure that on native iOS devices the images won't work after you change it. I am using an old version of Illdy and Jumbotrons did not work on iOS until I updated the 'background-attachment' parameter (now it works, with 'background-attachment' set to 'initial', but this is not what you want).

Hope it helps you somehow it tracking down the issue.

[cristianraiber]

@giucu91 - please see this

[sa3838]

I need a little help tracking down the original code. where would it be located?

[giucu91]

Hello @sa3838 can you give us your website URL ? Also can you tell us what you edited in order to tell you where you find the original code.

[sa3838]

yes, its durihub.com

[giucu91]

Hello @sa3838,

Add the next CSS to Customizer -> Additional CSS :

@media screen and (max-width: 768px) { body #header .bottom-header { padding-top: 70px; padding-bottom: 70px; } body #header .bottom-header h1 { line-height: 54px; font-size: 50px; } body #header .bottom-header .section-description { margin-bottom: 0; } } @media screen and (max-width: 500px) { body #header .bottom-header h1 { line-height: 44px; font-size: 40px; } body #header .bottom-header .section-description h5 { font-size: 18px; line-height: 24px; } body #header .bottom-header { padding-bottom: 50px; } }

This will improve your picture. We will try to find a solution for this because it's a bit complicated.

[sa3838]

yes, much better. thank you

[cristianraiber]

@giucu91 - keeping this ticket open so we can remember to push a fix for this issue.

[giucu91]

We need to take care of the font size of text on mobile devices because it is very big and the padding from top and bottom of the section. This affects the height of the section and produces the zoom of the image.