Кто-нибудь знает, как увеличить полноэкранную строку заголовка без потери заголовка из центра - PullRequest
Новая
       23

Кто-нибудь знает, как увеличить полноэкранную строку заголовка без потери заголовка из центра

1 голос
/ 17 июня 2020

Я пытаюсь сделать портфолио с адаптивным дизайном. Я хотел создать строку заголовка, занимающую весь экран, чтобы затем прокрутить вниз и go до содержимого. Я получил это, используя сетку, выравнивая и выравнивая контент (и используя некоторые отступы). Он отзывчивый, но если увеличить достаточно, заголовок опустится и покинет экран. Я хотел бы знать, может ли кто-нибудь мне с этим помочь. Я хочу, чтобы он оставался в центре при масштабировании. Делюсь тем, что написал. Хорошего дня, ребята. 

*{
    padding:0px;
    margin: 0px;
    font-weight: lighter;
    box-sizing: border-box; 
    font-family: helvetica, Arial, Sans-serif;
}
/*-------------------HEADER AND MENU BAR----------------------*/
body{
    background:white;   
}
#Title{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(20px, 3fr 1fr);
    padding: 0px;
    max-width: auto;
    text-align: center;
    color:whitesmoke;
    background-image: linear-gradient( to right, #9E0086,#FF5E00);
}
#Title > h1{
    padding: 400px 0px 400px 0px;
    letter-spacing: 5px;
    grid-column: 2/3;
    font-size: 25px;
    align-items: center;
    justify-items: center;
}
#Title > img{
    grid-column: 2/3;
    max-height: 100px;
    text-align: center;
    margin: auto;
}
/*------------------SECTION AND ARTICLES------------------*/
<DOCTYPE! html>
    <html>
        <head>
            <meta name="MyPortfolio" content="MyPortfolio">
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="Portfoliostyle.css">
        </head>
        <div>
            <body>
                <div >
                    <header id="Title">
                        <h1>
                            MY PORTFOLIO
                        </h1>
                        <img src="arrow.svg" alt="arrow">
                    </header> 
                </div>          
            </body>
        </div>
    </html>

1 Ответ

1 голос
/ 17 июня 2020

Добавлен полноэкранный режим и использованы vw и vh для полной высоты и ширины.

Надеюсь, это поможет 

    *{
        padding:0px;
        margin: 0px;
        font-weight: lighter;
        box-sizing: border-box; 
        font-family: helvetica, Arial, Sans-serif;
    }
    /*-------------------HEADER AND MENU BAR----------------------*/
    body{
        background:white;   
    }
    #Title{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(20px, 3fr 1fr);
        padding: 0px;
        width: 100vw;
        height : 100vh;
        text-align: center;
        color:whitesmoke;
        background-image: linear-gradient( to right, #9E0086,#FF5E00);
    }
    #Title > h1{
        letter-spacing: 5px;
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
    }
    #Title > img{
        grid-column: 2/3;
        max-height: 100px;
        text-align: center;
        margin: auto;
    }
    <DOCTYPE! html>
        <html>
            <head>
                <meta name="MyPortfolio" content="MyPortfolio">
                <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="Portfoliostyle.css">
            </head>
            <div>
                <body>
                    <div >
                        <header id="Title">
                            <h1>
                                MY PORTFOLIO
                            </h1>
                            <img src="arrow.svg" alt="arrow">
                        </header> 
                    </div>          
                </body>
            </div>
        </html>
...