Okay
  Public Ticket #1785005
Title Box
Closed

Comments

  •   jyim09 started the conversation
  •  599
    Imran replied

    Hello,

    Thank you for getting in touch. The feature box background image uses a css background size property with a 'cover' value, it means the image will be 'zoomed' to cover the entire area keeping its proportion.

    It's more a ratio as the size will be adjusted automatically. Any image around 4:1 will looks great, so 2000px by 500px 

    When you upload a tiny image, the zoom process will distort it since there's no enough size to cover everything. In short terms, the best solution is to upload a bigger image. The CSS solution you can try in your WordPress Dashboard > Appearance > Theme Settings > Custom Code > Custom CSS, should be editing the background-size. Something like:

    #featuredbox .featured-background {    background-size: contain; }

    You find more details at: https://www.w3schools.com/cssref/css3_pr_background.asp. Hope it helps, have a nice day.

    Best Regards,
    Imran.

    P.S.: Want feedback on your awesome Intranet? Get yourself a beta access on Feedier.com.

  •  1
    jyim09 replied

    Is there a way that I can get it not to zoom into such a small portion of the picture? I have a great panoramic picture that I would like to use beneath the title. I sized it to about 1900x520 pixels, but when I use it it zooms into about 1/10 of the picture. Any ideas on how to fix this?

  •  599
    Imran replied

    Hello,

    Thanks for your response! Picture zooms a bit, as a workaround, try to create an empty space around the picture using photoshop and save as png and then you can upload so the zoom part adjusts with the empty space around picture and the whole picture appears proverly without cropping.

    Best Regards,
    Imran.

    P.S.: Want feedback on your awesome Intranet? Get yourself a beta access on Feedier.com.

  •  1
    jyim09 replied

    Is there a way to set a maximum height for a the title box image regardless of what device is used?

    I got the images that I want to look great on a desktop, but then I looked at them on a mobile and the title box is double the height so it is showing blank space. I would like to set the title box height to 300 px across all devices.

    Thank you!

  •  582
    François replied

    Hello, 

    This CSS: 

    body #featuredbox .featured-background{height: 300px !important;}

    Should do the job finesmile.png

    If not please send us a screenshot of the problem, so we can see how to reproduce it.

    Kind Regards,

    François 

    Want feedback on your awesome site? Get yourself a beta access on our new product Feedier.com here: https://feedier.com/

  •  1
    jyim09 replied

    HI,

    Unfortunately it didn't work :(

    I have attached screen shots of what the title bar looks like of a desktop and on a mobile. As you can see, the mobile title is significantly higher so there ends up being a lot of blank space below the image. I would like to "lock" the height of the title bar to 320 px, which is what it is on a desktop.

    Thank you for your help!

    Attached files:  Image-1.jpg
      Capture.PNG

  •  599
    Imran replied

    Hello,

    Thanks for writing in! In this case, you can replace the previous code with new one. You can use the following code to your WordPress Dashboard > Appearance > Theme Settings > Custom Code > Custom CSS: 

    @media screen and (min-width: 659px) {
      body #featuredbox .featured-background{height: 300px !important;}
    } 
    

    Hope this helps! 

    Best Regards,
    Imran.

    P.S.: Want feedback on your awesome Intranet? Get yourself a beta access on Feedier.com.

  •  1
    jyim09 replied

    Hi,

    Unfortunately the title bar still appears the same. Any other ideas?

  •  599
    Imran replied

    Hello,

    Thanks for writing in! I've taken a look on your site's backend. There are so many 3rd-party plugins installed in your site. It's recommended testing for a plugin conflict by deactivating all the third party plugins on your site, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can specify which one by reactivating them one at a time. 

    Best Regards,
    Imran.

    P.S.: Want feedback on your awesome Intranet? Get yourself a beta access on Feedier.com.

  •  1
    jyim09 replied

    Hi,

    I have tried this and it made no difference. Please let me know what else I can try to rectify the issue.

    Thank you!

  •  582
    François replied

    Hello, 

    Here is another snippet to replace the old one: 

    @media only screen and (max-width: 900px) {
         #featuredbox .featured-background {
            background-size: inherit !important;
            background-position: inherit !important;
            background-attachment: fixed !important;
        }
    }

    Keep me postedsmile.pngWe'll get there!

    Kind Regards,

    François 

    Want feedback on your awesome site? Get yourself a beta access on our new product Feedier.com here: https://feedier.com/

  •  1
    jyim09 replied

    Thank you!!! There is still a narrow grey band above and below the image, but it looks 100X better!

  •  582
    François replied

    Hello, 

    Nicesmile.png You can try to change the page title's height to get that corrected from the Theme Settings.

    Kind Regards,

    François 

    Want feedback on your awesome site? Get yourself a beta access on our new product Feedier.com here: https://feedier.com/