[Resolved] IE 11 issue related to Header Element

Home Forums Support [Resolved] IE 11 issue related to Header Element

Home Forums Support IE 11 issue related to Header Element

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1003708
    dongsoon

    Hi,

    I find a some problem.
    I do not use page bilder.
    So we applied the Page Hero Example 3 proposed in this theme.

    As you know this is described at https://docs.generatepress.com/article/page-hero-examples/.

    I used the following code:

    <div class="page-hero-content">
      <h2>그대 가슴을 뛰게하는 필드로 오라!</h2>
      <h3>골프는 내가 통제하거나 지배할 수 있는 게임이 아니다.
    		골프는 내려놓는 게임이다.- 제스퍼 파네빅</h3>
    	<h3>가장 재미있는 운동이면서 인생 축소판같은 골프</h3>
    	<h3>난코스의 도전을 극복하고 회심의 미소를 지어 보자!!</h3>
      <div class="page-hero-buttons">
        <a href="https://ownergolf.net/조인/" class="button_join_front">조인 예약</a>
        <a href="https://ownergolf.net/부킹/" class="button_booking_front">실시간 예약</a>
      </div>
    </div>

    This works well for most Internet browsers such as crome, fire fox, and edge. But it seems broken only in IE 11.

    My issued page is https://ownergolf.net.

    Can you advise what the problem is?

    Upload some images to identify the problem.

    1. This is a comparison image between Crome and IE 11.
    crome vs IE 11

    2. This is the Element setting screen.
    setting

    #1003737
    Leo
    Staff
    Customer Support

    Hi there,

    IE is definitely a pain to deal with most of the time.

    Might be a good idea to run your CSS through this site for compatibility:
    https://autoprefixer.github.io/

    For example, the CSS in example 3 would become:

    .page-hero-content {
        padding: 20px;
        border: 5px solid rgba(211,211,35,0.2);
        border-radius: 10px;
        max-width: 700px;
    }
    
    @media (max-width: 1200px) {
        .page-hero-content {
             padding: 10px;
             margin: auto;
        }
    }
    
    .inside-page-hero {
        display: -ms-grid;
        display: grid;
            grid-template-areas: "left right";
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
    }
    
    .page-hero-content {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        grid-area: right;
    }
    
    @media (max-width: 768px) {
        .inside-page-hero {
            display: block;
        }
    }

    Let me know if this helps 🙂

    #1003932
    dongsoon

    Hi,
    Thank you for help.

    But is there any way to apply style ONLY on IE?
    Your proposed code snippet is some work on IE, but Things get worse in other browsers.

    Anyway, I solve this problem by setting top padding to 70px.

    Thanks again

    #1004082
    Leo
    Staff
    Customer Support

    Don’t think there is way to apply style only to IE, unfortunately.

    Glad you found a solution 🙂

    #1004105
    dongsoon

    Thanks
    Have a good day!!

    #1004117
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.