Fancy Heading Pictures zoom in too much

[lilialaminae]

Hello,

I was hijacking another thread and was told to create my own. Here you go!

All my Fancy Heading pictures are zoomed if I view them on smaller displays than the image size.

For example, I use a 13.3″ laptop with a resolution of 1366×768. The pictures are all saved in 1920x400px to match my fancy heading height and the width of the website, which I set to 1920. So, the pictures don’t display in their full width but get zoomed in. How can I disable that? It surely must be possible to have responsive Fancy Headings?

I also attached a screenshot from my phone (Screenshot_2015_….png). There it looks even worse.

Thank you for your help!

Attachments:

You must be logged in to view attached files.

[Nishant – SUPPORT]

Hello lilialaminae,

Thanks for providing the information. I am checking this for you.

[lilialaminae]

Thank you, Nishant!

[Nishant – SUPPORT]

Hello,

Can you provide the login details for your WordPress dashboard using private reply option below.

I need to login and fix this.

[lilialaminae]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
.fancy-heading{
background-repeat: no-repeat;
background-size: 100% 100% !important;
height:200px !important;
}
}

Thanks
Mohammad

[lilialaminae]

Hello Mohammad,

thank you for the code. Unfortunately, it didn’t solve the problem. See screenshots attached (mobile looks wild now!).

The problem appears also when the screen size is wider than 767px. My browser window in my laptop currently shows me the fancy heading with 1350px width and 400px height.

EDIT:

I experimented a bit with your code. If i comment the media only screen bit out, it also changes on my laptop. If I comment the height out, the image gets unproportional. If I only use 100% at background-size once, the image is proportional, but now not 400px high anymore. I attached another screenshot with my editings.

I hope you can follow me!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Mobile screenshot looks perfect. Please explain issue.
Thanks
Mohammad

[lilialaminae]

No, it looks like the Image is stretched. And the big screen issue where the edges of my Image are cut instead of being displayed in full width is still present.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.fancy-heading{
background-repeat: no-repeat;
background-size: 100% 100% !important;
}

You are using big image so its displaying some stretched in mobile.

Thanks
Mohammad

[lilialaminae]

Hi Mohammad,

I’m sorry, but the images are now stretched on my desktop, as well. Am I missing some basic knowledge about responsiveness? I see the Revolution Slider on the front page which uses a 1920×700 picture and a 700px slider height (so basically the same settings, right?) and it looks great in every size. Why do my images on the fancy headings, which have 1920x400px have to be zoomed or look stretched if not viewed on a big screen?

I’m sorry if I am a pain, I just want to understand so I won’t have to ask in the future.

[Mohammad – SUPPORT]

Hi,
I forward this to my colleague. He is expert in css.
Thanks
Mohammad

[Kyle – SUPPORT]

Hi

Please remove all current custom css and I will look into this for you

– Kyle

[lilialaminae]

Thank you Kyle, and thank you Mohammad!

The code is gone. Happy coding!

[Kyle – SUPPORT]

Can you explain what you expect the background to do on smaller screen sizes? The rev slider is actually that responsive, all it does is reduce the width and height and the text, which isn’t ideal

– Kyle