Как я могу предотвратить выход текста из сетки (сделать по центру)? - PullRequest
Новая
       0

Как я могу предотвратить выход текста из сетки (сделать по центру)?

0 голосов
/ 12 марта 2020

Я разрабатываю этот сайт для моего вводного курса. Они требуют разметки flex / grid (хотя мы не рассматривали это в классе). Я решил следовать учебному пособию по YouTube, которое делало сетку из 3 столбцов (по 1 fr каждый). Затем он добавил фон для каждой "ячейки". В каждой «клетке» у меня есть заголовок и описание. Я хочу, чтобы стиль заголовка и описания в каждой «ячейке» всегда был в центре, независимо от размера страницы. Мне удалось настроить текст по размеру страницы, но заголовок по-прежнему переполняется вправо, когда я минимизирую ширину окна. Вот что я имею в виду под переполнением: enter image description here

Как вы можете догадаться, когда ширина слишком велика, заголовок стремится к go справа. Это код (у меня больше нет изображений в качестве фона, но вы поняли): 

const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
    portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
        portfolioItem.addEventListener('mouseover', () => {
            portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
            //care este portofolio-img-background
        })
        portfolioItem.addEventListener('mouseout', () => {
            portfolioItem.childNodes[1].classList.remove('img-darken');
        })
    })
.portfolio-items-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item-wrapper{
    position:relative;
}

.portfolio-img-background{
    height:350px;
    width: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.portfolio-img-background:nth-of-type(odd)
{
    background-color: maroon;
}

.portfolio-img-background:nth-of-type(even)
{
    background-color: rgb(101, 172, 122);
}


.title-text-wrapper{
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    height: 100%;
    text-align: center;
    padding-left: 100px;
    padding-right: 100px;
}

#italian{
    font-family: 'Pacifico', cursive;
}

#american{
    font-family: 'Mitr';
}

.title-wrapper div{
    justify-content: center;
    font-size:5vw;
    color: white;
    align-items: center;
    text-align: center;
    align-content: center;
}

/* Needs to be more specific with selector*/

.title-text-wrapper .subtitle{
    transition: 1s;
    font-weight: 600;
    color: transparent; 
    align-self: center;;
}

.title-text-wrapper:hover .subtitle{
    font-weight: 600;
    color: lightseagreen;
}

.img-darken{
    transition: 1s;
    filter: brightness(10%);
}
.logo-wrapper{
    width: 50%;
    margin-bottom: 2px;
}
<div class="content-wrapper">
            <div class="portfolio-items-wrapper">

                <div class="portfolio-item-wrapper">
                        <div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
                        <div class="title-text-wrapper">
                            <div class="title-wrapper">
                                <div id="american">American</div>
                            </div>
                            <div class="subtitle">
                                    This is a description of american food.
                            </div>
                        </div>
                </div>
                
                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="italian">Italian</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="chinese">Asian</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="mexican">Mexican</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="romanian">Romanian</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="barbeque">Barbeque</div>
                        </div>
                        
                        <div class="subtitle">
                                Item
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="indian">Indian</div>
                        </div>
                        
                        <div class="subtitle">
                                Item
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="chinese">Chinese</div>
                        </div>
                        
                        <div class="subtitle">
                                Item
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="mediteranean">Mediteranean</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="desserts">Desserts</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="smoothies">Smoothies</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="coffee">Coffee</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

            </div>
        </div>

Я новичок в этом, поэтому буду признателен за ваши советы по поводу всего, что не так с этим кодом.

1 Ответ

0 голосов
/ 12 марта 2020

Проблема в том, что вы используете padding влево-вправо для создания элемента в center, я удалил его и сделал его width:100%, так как вы используете flex, поэтому его align center уже 

const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
    portfolioItems.forEach(portfolioItem => { //pentru fiecare item din portofolioItem vad cand am mouse pe el
        portfolioItem.addEventListener('mouseover', () => {
            portfolioItem.childNodes[1].classList.add('img-darken');//si cand am mouse-ul pe el iau primul copil
            //care este portofolio-img-background
        })
        portfolioItem.addEventListener('mouseout', () => {
            portfolioItem.childNodes[1].classList.remove('img-darken');
        })
    })
.portfolio-items-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item-wrapper{
    position:relative;
}

.portfolio-img-background{
    height:350px;
    width: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.portfolio-img-background:nth-of-type(odd)
{
    background-color: maroon;
}

.portfolio-img-background:nth-of-type(even)
{
    background-color: rgb(101, 172, 122);
}


.title-text-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    width: 100%;
}

#italian{
    font-family: 'Pacifico', cursive;
}

#american{
    font-family: 'Mitr';
}

.title-wrapper div{
    justify-content: center;
    font-size:5vw;
    color: white;
    align-items: center;
    text-align: center;
    align-content: center;
}

/* Needs to be more specific with selector*/

.title-text-wrapper .subtitle{
    transition: 1s;
    font-weight: 600;
    color: transparent; 
    align-self: center;
}

.title-text-wrapper:hover .subtitle{
    font-weight: 600;
    color: lightseagreen;
}

.img-darken{
    transition: 1s;
    filter: brightness(10%);
}
.logo-wrapper{
    width: 50%;
    margin-bottom: 2px;
}
<div class="content-wrapper">
            <div class="portfolio-items-wrapper">

                <div class="portfolio-item-wrapper">
                        <div class="portfolio-img-background" style="background-image:url(images/Portfolio1.jpg);"></div>
                        <div class="title-text-wrapper">
                            <div class="title-wrapper">
                                <div id="american">American</div>
                            </div>
                            <div class="subtitle">
                                    This is a description of american food.
                            </div>
                        </div>
                </div>
                
                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio2.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="italian">Italian</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio3.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="chinese">Asian</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio4.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="mexican">Mexican</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio5.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="romanian">Romanian</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio8.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="barbeque">Barbeque</div>
                        </div>
                        
                        <div class="subtitle">
                                Item
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio9.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="indian">Indian</div>
                        </div>
                        
                        <div class="subtitle">
                                Item
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio10.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="chinese">Chinese</div>
                        </div>
                        
                        <div class="subtitle">
                                Item
                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio11.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="mediteranean">Mediteranean</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio12.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="desserts">Desserts</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio6.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="smoothies">Smoothies</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(images/Portfolio7.jpg);"></div>
                    <div class="title-text-wrapper">
                        <div class="title-wrapper">
                            <div id="coffee">Coffee</div>
                        </div>
                        
                        <div class="subtitle">

                        </div>
                    </div>
                </div>

            </div>
        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...