New Landing › How can we help? › Cardinal › Fancy Heading Pictures zoom in too much

Viewing 15 posts - 1 through 15 (of 29 total)
1 2
  • Back to forum
    Posted in: Cardinal
  • May 25, 2015 at 11:15 am #178107
    lilialaminae
    Member
    Post count: 36

    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 #178110
    Nishant – SUPPORT
    Spectator
    Post count: 649

    Hello lilialaminae,

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

    May 25, 2015 at 11:33 am #178116
    lilialaminae
    Member
    Post count: 36

    Thank you, Nishant!

    May 25, 2015 at 11:41 am #178119
    Nishant – SUPPORT
    Spectator
    Post count: 649

    Hello,

    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 #178238
    lilialaminae
    Member
    Post count: 36
    This reply has been marked as private.
    May 26, 2015 at 6:59 am #178306
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    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

    May 26, 2015 at 10:30 am #178398
    lilialaminae
    Member
    Post count: 36

    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.
    May 26, 2015 at 11:40 am #178436
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

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

    May 26, 2015 at 11:52 am #178442
    lilialaminae
    Member
    Post count: 36

    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.

    May 27, 2015 at 9:36 am #178728
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    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

    May 27, 2015 at 10:00 am #178744
    lilialaminae
    Member
    Post count: 36

    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.

    May 27, 2015 at 10:29 am #178764
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

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

    May 27, 2015 at 10:35 am #178773
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

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

    – Kyle

    May 27, 2015 at 12:01 pm #178812
    lilialaminae
    Member
    Post count: 36

    Thank you Kyle, and thank you Mohammad!

    The code is gone. Happy coding!

    May 27, 2015 at 12:14 pm #178815
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

  • Back to forum
    Posted in: Cardinal
Viewing 15 posts - 1 through 15 (of 29 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register