Problem with changing padding and hero height

1

Hello, I have a problem with my website on mobile. On the some pages, the logo is on the hero text . I tried changing the hero height, padding, margin and some CSS, but it still doesn’t fix it means when you watch it you can see the hero is too smaller than the other pages that’s why it’s happening . The other pages look fine . Can someone help me find what is causing this?

2

you will need to share your code, it is not possible to investigate this without seeing your code

3

Sure I will share the codes here is the html code of two pages. 

<a href="index.php"
   class="logo"
   aria-label="64 Custom Home">

    <img
        src="images/64custom-logo.png"
        alt="64 Custom"
        class="header-logo">
</a>

<button
    class="menu-toggle"
    type="button"
    aria-label="Open navigation"
    aria-expanded="false"
    aria-controls="mainMenu">

    <span></span>
    <span></span>
    <span></span>

</button>

<div class="page-gap"></div>

<div class="about-hero-number"
     aria-hidden="true">
    64
</div>

<div class="about-hero-content"
     data-reveal="left">

    <p class="eyebrow">
        ABOUT 64 CUSTOM
    </p>

    <h1>
        Built on
        <span>Experience.</span>
    </h1>

    <p>
        7 years of experience,
        precision workmanship and
        a passion for automotive styling.
    </p>

</div>

And this is my css code for that. @media (max-width: 700px) {

.site-header {
    height: 72px;
    padding: 0 6vw;
}

.menu-toggle {
    width: 45px;
    height: 45px;
}

.services-hero {
    min-height: 82svh;
    padding: 0 6vw 9vh;
    align-items: flex-end;
}

.about-hero {
    min-height: 82svh;
    padding: 0 6vw 9vh;
    align-items: flex-end;
}

.services-hero-content h1,
.about-hero-content h1 {
    font-size: clamp(49px, 14vw, 72px);
}
4

IMG_6337
IMG_63371320×729 94.8 KB