Digital experiences for all disciplines
New Landing › How can we help? › Cardinal › Fancy Heading Pictures zoom in too much
New Landing › How can we help? › Cardinal › Fancy Heading Pictures zoom in too much
- This topic has 28 replies, 4 voices, and was last updated 9 years by Kyle – SUPPORT.
-
Posted in: Cardinal
-
May 25, 2015 at 11:15 am #178107
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.May 25, 2015 at 11:18 am #178110Hello lilialaminae,
Thanks for providing the information. I am checking this for you.
May 25, 2015 at 11:33 am #178116Thank you, Nishant!
May 25, 2015 at 11:41 am #178119Hello,
Can you provide the login details for your WordPress dashboard using private reply option below.
I need to login and fix this.
May 25, 2015 at 8:44 pm #178238This reply has been marked as private.May 26, 2015 at 6:59 am #178306Hi,
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
MohammadMay 26, 2015 at 10:30 am #178398Hello 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.May 26, 2015 at 11:40 am #178436Hi,
Mobile screenshot looks perfect. Please explain issue.
Thanks
MohammadMay 26, 2015 at 11:52 am #178442No, 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.
May 27, 2015 at 9:36 am #178728Hi,
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
MohammadMay 27, 2015 at 10:00 am #178744Hi 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.
May 27, 2015 at 10:29 am #178764Hi,
I forward this to my colleague. He is expert in css.
Thanks
MohammadMay 27, 2015 at 10:35 am #178773Hi
Please remove all current custom css and I will look into this for you
– Kyle
May 27, 2015 at 12:01 pm #178812Thank you Kyle, and thank you Mohammad!
The code is gone. Happy coding!
May 27, 2015 at 12:14 pm #178815Can 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
-
Posted in: Cardinal
You must be logged in and have valid license to reply to this topic.