Gorgeous Theme with a little Problem

  • claudius9

    (@claudius9)


    2 years, 6 months ago

    First, this theme is fantastic.
    It looks great. Easy to customize. It’s like a new beginning for WordPress.

    But currently, there is still one major flaw: the theme looks different depending on the browser you are using. This theme looks different on my Computer in Chrome, Firefox, and Safari.

    I guess it’s because of code like this:

    
.has-x-large-font-size {
font-size: var(–wp–preset–font-size–x-large) !important;
}

    Some browsers can use this, but older ones seem to be unable to use it. Only on my Chrome browser it’s displayed like it should be.

    With Safari Version 12, the Header Menu is not usable.

    I know Safari 12 is an older version, but for a theme that is uploaded to millions of websites as part of 5.9. this is imperfect.

    I hope this gets fixed with an update.
    And then this theme will get the five stars it deserves.

    • This topic was modified 2 years, 6 months ago by claudius9.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Kjell Reigstad

    (@kjellr)

    2 years, 6 months ago

    Hi there! Just want to confirm your issue here. From my testing, the issue is not the use of variables, but the use of gap inside of the navigation block. This is unsupported in this context for some older browsers, and it causes the navigation to appear like this:

    Screen Shot 2022 02 01 at 1 09 04 PM

    Is this the issue you’re seeing?

    If so, unfortunately that’s not a choice that the theme made — that rule comes from WordPress itself. So this will be a problem with any theme that utilizes Full-site Editing features in WordPress 5.9. If you’d like to work around this for older browsers, you can open up the customizer from here:

    https://yoursite.com/wwp-admin/customize.php

    Then, enter something like the following under “Additional CSS”:

    
.wp-block-navigation .wp-block-navigation-item:not(:first-child) {
    margin-left: var(--wp--style--block-gap, 2em);
}
    Thread Starter claudius9

    (@claudius9)

    2 years, 6 months ago

    Hi there. Thank you for being so helpful.

    Yes, you are right.

    I guess I mixed two things:
    1. That sites looked different in different browsers. That’s why the site looks different in Firefox and Chrome.
    2. That it seems the support for that safari version with FSE was dropped, which I didn’t know.

    I guess it’s the same as these news for the IE:

    The New Editor and Browser Support

    Dropping support for Internet Explorer 11

    Do you know if there is a post with all supported or unsupported browser versions mentioned?
    Because then I could find a plugin to let users with older browsers know that they should update their browsers.

    Or is there a post with common CSS that has to be added, like your code?

    Because still, the logo, headings, submenu, or block post templates would all require additional CSS.

    Thanks for your response!

    Kjell Reigstad

    (@kjellr)

    2 years, 6 months ago

    Do you know if there is a post with all supported or unsupported browser versions mentioned?

    The general guidance for browser support is listed here:

    https://make.wordpress.org/core/handbook/best-practices/browser-support/

    For most browsers, WordPress officially supports the last two versions. But there are levels of gradation in terms of what “Support” means. If something looks wrong but is still functional that could technically fall under the category of supported.

    I don’t know of a central repository of CSS fixes like the one I shared above. In general they just come up in support threads as people ask for them.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Gorgeous Theme with a little Problem’ is closed to new replies.