Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Various Problems with the Header Photos

dimensionsheaderresponsivespecular
    • 9 years, 11 months ago Firmenathleten
      Participant

      Expired

      Hi Team Codeless,

      please let me start by thanking you very much for providing such an amazing framework to the public. I’m currently bringing to life a small side project of mine on the basis of your theme and am in general very satisfied with the results.

      Unfortunately, and as always when working on a tight deadline, there are a couple of bugs occurring that I would love you to have a glance at as soon as possible. Please let me know for each of the four problems whether there is a possible solution that is easily to be executed by myself or whether you would be available for paid customization work in other cases.

      In all of the following descriptions, I’m referring to the following website: https://firmenathleten.de

      • Header photos on large screens: The larger the screen resolution the more gets vertically cut off from the original image. The reason for this might be that one is natively only able to adjust the height of the header photo in a fixed amount (in px vs. percent). It’s by far the most annoying problem right now since it makes the website very ugly when using larger screens. Can this be fixed somehow?
      • Header photo in Firefox: When using the Firefox browser the header photo seems to have a white veil on top of it. This bug does not occur in your demo. Could there be any wrong setting causing the described problem?
      • Header photo on iPad: On iPads the header photo is moving to the right. Any ideas how this can be solved?
      • Logo on older iPhones: On iPhone 5 e.g. the logo is weirdly moved to the side. Is there any fix to center the logo on all mobile devices?
      • <b>”Zoom-in” of some header photos: </b>When accessing certain subpages (such as https://firmenathleten.de/persoenliches-fitnesstraining/), for the fraction of a second the header photo gets shown normally (with the respective problems occurring as described above) and then weirdly “zooms in” to the photo. How can we prevent this from happening?

      I thank you very much in advance for your amazing support and hope for a fast solution for the bugs mentioned. Since this project is on a very tight deadline I would really appreciate a short reply (even if the solution might take longer time). Please also let me know in case any paid customization work could solve this problem as we’re very dependent on getting this to work asap.

      Cheers,

      Marius

       

    • 9 years, 11 months ago Mirela
      Participant

      Hello,

      Can you please provide access to your site? So we can check the settings. You can send the credentials in a private reply.

      Best regards!

    • 9 years, 11 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 11 months ago Firmenathleten
      Participant

      Expired

      Hi Team Codeless,

      I provided you the necessary credentials three days ago.

      Did you have time to check the settings already? Please let me know asap, since this project is on a deadline.

      Best,

      Marius

    • 9 years, 11 months ago Firmenathleten
      Participant

      Expired

      I’m still waiting for an update — by now a little less patient than before. Please do reply as soon as possible.

    • 9 years, 11 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      1-About how much large screen are we talking? Do you mean a projector size width? I can’t really test this, but please add this code into your custom css box:

      @media (min-width: 1101px){
      .container {
          width: 100%;
          max-width: 5100px !important;
      }}

      ..and let us know if it will fix it.
      2-I checked with Firefox and I don’t see any white veil. Please post a screenshot so i can understand better.

      3-Please see here a screenshot of the iPad view. Did you manage to fix your issue?

      4-Please add this code into your custom css box:

      @media (max-width: 480px){
      #logo {    float: right;    left: -48px !important;}
      }

      -Select Fixed background position at page options. I changed it and now it does not zoom in mobile. Screenshot

      Best regards!

    • 9 years, 10 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 10 months ago Mirela
      Participant
      This reply has been marked as private.
    • 9 years, 10 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 10 months ago Mirela
      Participant

      Hello,

      1-I edited the max width of the screen, to max-width: 2570px. Please test it from your side and let me know..
      3-I added this code:

      @media (max-width: 1024px){
          header#header #navigation {  display: none;}
      }

      into your custom css box, for the ipad horizontal view. Please check your site.

      Let us know.

      Best regards!

    • 9 years, 10 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 10 months ago Mirela
      Participant

      Hello,

      1-I have forwarded this request to our developer team. We’ll get back to you asap.
      2-We had a misunderstanding here. You said you wanted:”to only see the logo and button and have the menu hidden” that is why i gave you that css. If you want to have the burger menu before reaching the mobile width, then you have to set ON the “Show Responsive Menu Dropdown” in Header Options. And edit the css code in your custom css box to this:

      @media (max-width: 1024px){
          header#header #navigation {  display: none;}
          .mobile_small_menu { display: block;}
      }
      

      Best regards!

    • 9 years, 10 months ago Ruco
      Keymaster

      Hello,

      You image have the size 5760x3840px. It should be more wider than long. Ex. 5000x1000px. Try to change the image size.

      It’s cut at the bottom to make it fit the screen width.

      Best regards!

    • 9 years, 9 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 9 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      I removed the extra side menu(the three bars beside menu), if you want to add them any time later, just go to General Options > Layout > Extra Side Navigation, set it ON.
      You have an old version of Visual Composer, that’s why you are facing some issues. Please update theme and Visual Composer to their latest versions. let us know if you still have problems.

      Best regards!

    • 9 years, 8 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 8 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      You need to update Visual Composer too. Just delete the plugin’s folder in your wp-content/plugins folder. Then go back to your dashboard and install it again. It will install the included in theme, version which is the latest one.

      Best regards!

    • 9 years, 8 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      1- One of your installed plugins has affected theme css. Please find this file: sccss.css (it should be at the root)
      and find this code in it:

      @media (min-width: 1101px){
      .container {
          width: 100%;
          max-width: 5100px !important;
      }}

      if you remove the !important from it, the site comes to regular layout.

      2-I added this code into your custom css box:

      @media (max-width: 979px){
          .header_page.centered {
          background-size: contain !important;
          height: 428px !important;}
          .header_page h1 {
          line-height: 85px !important;
          padding-top: 130px !important;
      }
      }

      The ‘a’ page, looks ok now. But the ‘b’ page still not. Please take care of the file mentioned above first. Then we can check it up again.

      Best regards!

    • 9 years, 8 months ago Firmenathleten
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 8 months ago Mirela
      Participant

      Hello,

      I added this line into the present code in your custom css box:
      .page-id-34 .header_page.centered { background-size: inherit !important;}
      This is the result of page ‘b’ in ipad, screenshot.
      Let us know if you need anything else.

      Best regards!

Viewing 21 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password