Hero image text not responsive on mobile phone

Question

I'm looking for help with Hero image text. It's not responsive on mobile phone.

Here is the code:

/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/intro-image-300px.jpg);
    background-color: #04AA6D;

    /* Set a specific height */
    height: 300px;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

<div class="hero-image">
            <div class="hero-text">
                <h1>Nechte si vytvořit 3D virtuální prohlídku profesionály!</h1>
                <p><b>3D virtuální prohlídka</b> je čím dál oblíbenější. Není divu. Je to interaktivní prezentace
                    nemovitosti, kterou prodáváte či pronajímáte. Potenciální zájemci si mohou vaši nemovitost pomocí
                    této prohlídky projít a vidět vše v reálu, stejně, jako kdyby se na místo dostavili osobně. Výhodou
                    je i přibližování detailů, kompletní pohled do místností nebo vkládání odkazů.</p>
                    <button><a href="#kontakt">Objednat</a></button>
            </div>

mobile view of hero text

Its my first website ever, so I'm kinda lost.

You can find full repository on git hub, here:

GitHub Repository

Thank you for all your help

Answer 1

A couple of things wrong here:

1. You're using an image as the background for a solid colour but I could be wrong dependent on your design, I can only assume.
2. You're setting a height for the .hero-image and when you have some content (.hero-text) inside that's position: absolute, it will presume the height of the content is 0px which is why the content is going outside the green area.

Solution:

1. Use flex on the container to horizontally and vertically center the content. Heavily recommend looking into FlexBoxFroggy (https://flexboxfroggy.com/) if you want to learn more about Flex and the capabilities it can offer.
2. Remove the height attribute and change with min-height. This means that the content (.hero-image) can only be a minimum of 300px and can go higher than that if need be.

Hope this helps explain some of the problems

/* The hero image */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #04AA6D;

    /* Set a specific height */
    min-height: 300px;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: center;
    color: white;
}

<div class="hero-image">
            <div class="hero-text">
                <h1>Nechte si vytvořit 3D virtuální prohlídku profesionály!</h1>
                <p><b>3D virtuální prohlídka</b> je čím dál oblíbenější. Není divu. Je to interaktivní prezentace
                    nemovitosti, kterou prodáváte či pronajímáte. Potenciální zájemci si mohou vaši nemovitost pomocí
                    této prohlídky projít a vidět vše v reálu, stejně, jako kdyby se na místo dostavili osobně. Výhodou
                    je i přibližování detailů, kompletní pohled do místností nebo vkládání odkazů.</p>
                    <button><a href="#kontakt">Objednat</a></button>
            </div>