Как сделать так, чтобы боковая панель Flex Box go работала в полноэкранном режиме при изменении размера окна? - PullRequest
Новая
       0

Как сделать так, чтобы боковая панель Flex Box go работала в полноэкранном режиме при изменении размера окна?

1 голос
/ 22 марта 2020

У меня есть это окно Flex, и когда я изменяю размер страницы в мобильном режиме, я хочу, чтобы боковая панель отображалась в полноэкранном режиме go, а нижний колонтитул исчезал.

Есть ли способ сделать мою боковую панель? занять всю страницу только при изменении размера окна в мобильном режиме?

Я не мог найти что-либо относительно своего вопроса, и мне понадобились часы и часы, чтобы найти решение для этого, но я ничего не могу найти ...

Заранее спасибо, ребята! 

This is the CSS and below is the HTML:


@import url('https://fonts.googleapis.com/css? family=Nunito:300,300,700');
body {
    font-family: 'Nunito', sans-serif;
    background: #EFF1F7;
    padding: 0;
    margin: 0;
}
.content {
    grid-area: content;
    
}
.sidebar{
    grid-area: sidebar;
    background: linear-gradient(to left, rgba(249,107,142,1), rgba(218,103,230,1), rgba(130,125,253,1));
    justify-content: center;   
}
.footer {
    grid-area: footer;
    background: white;
}
.container {
    font-size: 1em; 
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-areas: 
    "sidebar"
    "content" 
    "footer"; 
    grid-template-columns: 1fr;
    grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
    padding: 1em;
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

nav li {
    list-style: none;
    padding: 1em 0;
}

nav li a {
    color: white;
    font-weight: 700;
    opacity: 0.6;
    text-decoration: none;
    transition: 0.3s;
}

nav li a:hover {
    opacity: 1;
}



.action-btn {
    display: inline-block;
    text-decoration: none;
    color: white;
    font-weight: 700;
    background: #867bfb;
    padding: 0.5em 2em;
    border-radius: 40px;
    margin: 1em 0;
    transition: 0.3s;
}

.action-btn:hover {
    box-shadow: 0 10px 50px rgba(188,197,216,1);
}

footer ul {
    max-width: 640px;
    margin: 2em auto;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: row;
}

footer ul li {
    list-style: none;
    align-self: flex-end;
}
footer ul li a {
    text-decoration: none;
    color: #c1c6ce;
}
svg {
    width: 40%;
}

footer p{
    font-size: 0.8em;
}

@media (min-width: 1040px) {
    .container {
        grid-template-areas: "sidebar content" "sidebar footer"; 
        grid-template-columns: 300px 1fr;
        grid-template-rows: 1fr auto;
    }
    nav ul {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .sidebar {
        background: linear-gradient(
            rgba(249,107,142,1),
            rgba(218,103,230,1),
            rgba(130,125,254,1));
            padding-top: 3em;
            
    }
   
    footer ul {
        max-width: 960px;
        margin: 0 auto;
        padding: 2em 0;
    }
    svg {
        width: 20%;
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>New</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>

    <div class="container">
        <div class="sidebar">
            <nav>
                <ul>
                    <li><img src="GalGadot.jpg" style="width: 120px; height: 80px; border-radius: 50%;"></li>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Groups</a></li>
                    <li><a href="#">Saved</a></li>
                    <li><a href="#">Events</a></li>
                </ul>
            </nav>
        </div>
       
        <div class="footer">
            <footer>
                <ul> <!--instagram SVG icon-->
                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}</style></defs><path class= "a" d="M17.25 7.288v1.269c0 .297-.241.539-.538.539h-1.269c-.299 0-.538-.242-.538-.539v-1.269c0-.297.239-.538.538-.538h1.269c.297 0 .538.241.538.538zm-5.25 7.403c1.486 0 2.693-1.205 2.693-2.692s-1.207-2.69-2.693-2.69c-1.487 0-2.691 1.204-2.691 2.691s1.204 2.691 2.691 2.691zm4.261-3.291c.028.196.046.396.046.599 0 2.38-1.928 4.308-4.307 4.308s-4.307-1.928-4.307-4.307c0-.204.018-.403.046-.599.027-.194.066-.383.118-.567h-1.107v5.879c0 .297.241.538.538.538h9.424c.297 0 .538-.241.538-.538v-5.879h-1.107c.05.184.09.373.118.566zm7.739.6c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-5.385c0-.892-.723-1.615-1.615-1.615h-10.77c-.892 0-1.615.723-1.615 1.615v10.769c0 .893.723 1.616 1.615 1.616h10.77c.892 0 1.615-.723 1.615-1.616v-10.769z"/></svg><p>3K</p></a></li>

                    <!--facebook SVG icon-->

                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}</style>
                    </defs><path class="a" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg><p>10K</p></a></li>

                    <!--twitter SVG icon-->
                    <li><a href="#"><svg  viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="39.337" height="33.328"></rect></clipPath></defs><g class="b"><path class="a" d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578 9.3 9.3 0 0 1-2.958 1.13 4.66 4.66 0 0 0-7.938 4.25 13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568 4.692 4.692 0 0 1-2.104.08 4.661 4.661 0 0 0 4.352 3.234 9.348 9.348 0 0 1-5.786 1.995 9.5 9.5 0 0 1-1.112-.065 13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41z"></path></g></svg><p>5.7K</p></a></li>

                        <!--Linkedin SVG icon-->
                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}</style>
                    </defs><path class="a" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg><p>13.5K</p></a></li>
                </ul>
            </footer>
        </div>

    </div>

    
    
</body>
</html>

1 Ответ

0 голосов
/ 20 апреля 2020

Вы можете просто написать запрос @media, чтобы сделать .sidebar { width: 100%} и .footer { display: none }

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

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

...