Welcome banner is not responsive

[studiotopweb]

The header image, inside the welcome section, is not responsive, in particular does not adapt to a resolution of 1366 x 768.
The idea is that the image is full visible inside the screen without scroll.
Do we need to crop the image in a particular size?

Thank you,
Nicola

[Hans (Support Admin)]

Hello Nicola,

If you check out our demo you will see that it is indeed responsive.

http://demo.themely.com/integral/

The Welcome section background image retains 100% height of the section on all devices.

The issue is most likely with the size of your image.

The size of the image being used on the demo is 1600px by 1067px.

[studiotopweb]

I don’t know why but is not working.
Please check antitarlo.com

I tried using settings No repeat Cover Fixed Center center
http://www.antitarlo.com/wp-content/uploads/2017/03/Complet-amb.-1-1600×1067.jpg

Neither other options are working.

May you help me?

Thank you,
Nicola

[Hans (Support Admin)]

I checked http://www.antitarlo.com/

The image is responsive but you may want to change your padding settings for the Welcome section.

The image retains 100% height of the Welcome section, as intended.

However, the padding settings do have an impact on that.

[studiotopweb]

Hi Hans,

the image is cut up and down! Even using padding settings is not solving this issue
Actual padding values are: 75 / 650
Moreover on mobile is not responsive at all.

Could you please help us?

Thank you,
Nicola

[Hans (Support Admin)]

Hi Nicola,

When viewing the site on my mobile phone, the subtitle and buttons in the Welcome section dissappear, was that intentional?

Did you add code to hide it on mobile devices?

Your padding settings are causing the image to be very tall on bile devices and doesn’t vertically align the title.

Try using percentages for the padding instead of pixels.

You will see a drop down net to the padding settings which allows you to select between pixels or percentage.

[studiotopweb]

When viewing the site on my mobile phone, the subtitle and buttons in the Welcome section disappear, was that intentional? Yes I did

Did you add code to hide it on mobile devices? —> Yes I did

I set 20% 80% for every resolution, and 20% 21% for mobile.
For mobile is OK.

Can you advice any % for all the devices?
Is there any rule?

Thank you,
Nicola

[Hans (Support Admin)]

Using percentages is generally the solution for all devices.

But you can use different percentages for specific devices like you’ve already done.