[Support request] Site-title visibility issues in Firefox and Chrome

Home Forums Support [Support request] Site-title visibility issues in Firefox and Chrome

Home Forums Support Site-title visibility issues in Firefox and Chrome

  • This topic has 5 replies, 3 voices, and was last updated 3 months ago by Ying.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2208781
    Roi

    Hello,

    I’m using GP & Slideout.

    1. The site title looks fine upon first entrance in Desktop Firefox (v.100), and after a single click the location breaks and is misplaced. I cannot recreate this issue in Chrome.

    2. When I emulate an Ipad in Firefox, the site title “jumps” upon every refresh (v.100, Ipad View). I cannot recreate this issue in Chrome.

    3. When I emulate any device that is 769px wide or more, the site title isn’t centered in Chrome.

    Note that I don’t use any caching plugins etc.

    Any help is appreciated.

    #2208787
    David
    Staff
    Customer Support

    Hi there,

    in Customizer > Additional CSS look for this:

    #site-navigation .inside-navigation {
    	flex-direction: column;
    	flex-wrap: nowrap;
    	min-height: 100vh;
    }

    and change it to:

    #site-navigation .inside-navigation {
    	flex-direction: column;
    	flex-wrap: nowrap;
    	min-height: 100vh;
    	align-items: unset;
    }

    That change is just adding the align-items: unset; property.

    #2209200
    Roi

    Thank you.

    The problem is gone for desktop, but now there are other problems.

    1. In desktop, specifically Firefox, the width of the header changes between 60/58px in desktop.

    2. In tablet (769px+), title is still displaced. I think it has to do with a margin that’s applied between 769-1100px.

    #2209217
    David
    Staff
    Customer Support

    1. I am not seeing this ? When does the change occur.

    2. You have this CSS on your site:

    @media (max-width: 1110px) {
     #site-navigation .navigation-branding,
     #sticky-navigation .navigation-branding {
      margin-left:10px;
     }
    }

    Remove that to fix the movement on Tablet.

    #2209499
    Roi

    1. Never mind, not that big of a deal anyway.

    2. I never added this snippet. The WP CSS Live Customizer is clean and all additional CSS is in the Child’s Theme CSS, which also doesn’t contain this snippet. How can we get rid of it?

    #2209541
    Ying
    Staff
    Customer Support

    Hi Roi,

    The CSS is actually from GP, sorry for the confusion.

    Try the below CSS to overwrite it:

    @media (max-width: 1110px) {
     #site-navigation .navigation-branding,
     #sticky-navigation .navigation-branding {
      margin-left:0;
     }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.