0

Хочу, чтобы при использовании сайта с мобильного устройства(ширина экрана < 767 px) блок "top-news" растягивался на всю ширину, но не получается. Как это можно сделать? Вот код:

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
             $('#topBtn').fadeIn();
         } else {
            $('#topBtn').fadeOut();
        }
    });
        $('#topBtn').click(function() {
            $('body,html').animate({scrollTop:0},700);
                });
    });
    .i-body {
    margin: 0;
    background-color: rgb(176, 190, 239);
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    max-width: 100%;
}

.i-body a{
    text-decoration: none;
}

.header {
    width: 98%;
    height: 90px;
    margin: 10px 1%;
    

    background-color: rgb(238, 238, 238);
    border-radius: 15px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;

    position: fixed;
    
    z-index: 5;
}

.header-body {
    z-index: 2;
    display: flex;
    justify-content: space-between;

    height: 90px;
    align-items: center;
}

.main-txt {
    display: flex;
}

.main-main {
    font-size: 32px;
    color: rgb(92, 100, 128);
    text-size-adjust: none;

    margin: 20px 0;
    padding-left: 20px;
    transition: all 0.3s ease-in-out 0s;
}

.main-main:hover {
    transform: scale(1.2);
    animation: rainbow-main 4.5s linear;
    animation-iteration-count: infinite;
}

@keyframes rainbow-main {
    100%,0%{
        color: rgb(255,0,0);
    }
    8%{
        color: rgb(255,127,0);
    }
    16%{
        color: rgb(255,255,0);
    }
    25%{
        color: rgb(127,255,0);
    }
    33%{
        color: rgb(0,255,0);
    }
    41%{
        color: rgb(0,255,127);
    }
    50%{
        color: rgb(0,255,255);
    }
    58%{
        color: rgb(0,127,255);
    }
    66%{
        color: rgb(0,0,255);
    }
    75%{
        color: rgb(127,0,255);
    }
    83%{
        color: rgb(255,0,255);
    }
    91%{
        color: rgb(255,0,127);
    }
}

.header-burger {
    display: inline-block;
    position: fixed;

    margin: 20px 0;
    width: 50px;
    height: 30px;
    left: calc(99% - 70px);
}
.b-1,
.b-2,
.b-3 {
    content: '';
    background-color: rgb(92, 100, 128);
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 25px;
    transition: all 0.3s ease-in-out 0s;

    box-shadow: 0;
}
.b-2 {
    top: 0;
}
.b-3 {
    bottom: 0;
}
.b-1{
    top: 12.5px;
}

.b-1.active {
    transform: scale(0);
}
.b-2.active {
    transform: rotate(315deg);
    top: 12.5px;
}
.b-3.active {
    transform: rotate(-315deg);
    bottom: 12.5px;
}

.header-burger:hover .b-1, 
.header-burger:hover .b-2,
.header-burger:hover .b-3 {
    transition: all 0.3s ease-in-out 0s;
    box-shadow: 1px 1px 1px rgb(159, 159, 160);
}


.header-menu {
    opacity: 0;
    margin: 20px auto;
    width: 700px;

    position: relative;
    display: flex;
    transition: all .3s ease-in 0s;
}

.header-menu.active {
    opacity: 100%;
}

.header-list {
    display: flex;
}
.header-list li {
    list-style: none;
}
.header-link {
    padding-left: 20px;
    padding-right: 20px;

    font-size: 32px;
    color: rgb(92, 100, 128);
}

.card {
    width: 20%;
    height: 560px;
    margin-top: 130px;
    margin-left: 1%;
    padding: 20px;

    background-color: rgb(238, 238, 238);
    border-radius: 15px;
}

.card-photo {
    display: block;
    width: 200px;
    height: 200px;

    margin: 0 auto;
    border-radius: 50%;
}

.card-text {
    margin-top: 30px;
    font-size: 15px;
    color: rgb(82, 82, 82);
    text-size-adjust: none;
}

.news {
    width: 60%;
    height: 600px;
    margin-top: 130px;
    right: 0;
    margin-right: 1%;
    position: absolute;

    background-color: rgb(238, 238, 238);
    border-radius: 15px;
}

.top-news-name {
    margin-left: 2%;
    margin-top: 10px;
    color: rgb(238, 238, 238);
    font-size: 48px;
    z-index: 3;
    bottom: 10%;
    position: absolute;
    transition: all 0.5s ease-in-out 0s;
}
.top-news-sd {
    margin-bottom: 20px;
    margin-left: 2%;
    width: 70%;
    bottom: -5%;

    opacity: 0;
    color: rgb(238, 238, 238);
    font-size: 20px;
    z-index: 3;
    position: absolute;
    transition: all 0.5s ease-in-out 0s;
}
.top-news-preview {
    transition: all 0.5s ease-in-out 0s;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.news:hover .top-news-name {
    bottom: 32%;
}
.news:hover .top-news-sd {
    opacity: 100%;
    bottom: 8%;
}
.news:hover .top-news-preview {
    filter: brightness(40%);
}

.body-container {
    display: flex; 
    flex-direction: row;
}

.top-news {
    width: 98%;
    height: fit-content;
    background-color: rgb(244, 244, 244);
    border-radius: 15px;
    margin-left: 1%;
    margin-top: 130px;

    position: absolute;
}

.top-news h3{
    margin: 20px 20px;
    font-size: 32px;
}
.top-news p{
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    display: inline-block;
}
.top-news img{
    border-radius: 10px;
    width: 700px;
    display: inline-block;
}

.nimg-1 {
    float: left;
    padding-right: 20px;
}
.nimg-2 {
    float: right;
    padding-left: 20px;
}
.nimg-3 {
    float: left;
    padding-right: 20px;
}
.top-news br{
    padding: 10px;
}

.top-btn {
    bottom: 20px;
    position: fixed;
    background-color: rgb(255, 79, 152);
    width: 1%;
    height: 50px;
}

@media (max-width:767px) {
    .header {
        border-radius: 0;
        margin-left: 0;
        width: 100vh;
    }
    .main-main {
        font-size: 24px;
    }
    .header-link {
        font-size: 24px;
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .top-news {
        border-radius: 0;
        margin-right: 0;
        margin-left: 0;
        min-width: 100%;
        width: 100%;
    }
    .nimg-1 {
        height: fit-content;
        width: 300px;
    }
    .nimg-2 {
        height: fit-content;
        width: 300px;
    }
    .nimg-3 {
        height: fit-content;
        width: 300px;
    }
}
<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/style.css">
        <title>Какая-то интересная статья</title>

        <link rel="shortcut icon" href="img/head.jpg">

    </head>
    <body class="i-body">

        <div class="wrapper">
            <header class="header">
                <div class="container">
                    <div class="header-body">
                        <div class="main-txt">
                            <a href="index.html" class="main-page">
                                <h2 class="main-main">Главная</h2>
                            </a>
                        </div>
                        <nav class="header-menu">
                            <ul class="header-list">
                                <li>
                                    <h2><a href="#"class="header-link">Портфолио</a></h2>
                                </li>
                                <li>
                                    <h2><a href="#" class="header-link">Отзывы</a></h2>
                                </li>
                                <li>
                                    <h2><a href="#" class="header-link">Контакты</a></h2>
                                </li>
                            </ul>
                        </nav>
                        <div class="header-burger">
                            <span class="b-1"></span>
                            <span class="b-2"></span>
                            <span class="b-3"></span>
                        </div>  
                    </div>
                </div>
            </header>
        </div>

        <div class="top-news">
            <h3 class="nname">Какая-то интересная статья</h3>
            
            <p class="d-1">
                <img src="news-previews/1.jpg" alt="#" class="nimg-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet, turpis ut gravida tincidunt, libero risus ullamcorper turpis, ut pulvinar ligula neque vel orci. Mauris semper ullamcorper vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam pulvinar viverra convallis. Integer ultrices quam vel est tincidunt interdum. Mauris id ante quam. In egestas dapibus nisl non pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur sodales malesuada elit. Praesent et pulvinar urna. Sed sit amet nisi ut lacus molestie lobortis. Nullam sit amet tempor massa, vel tristique leo. Suspendisse ultricies augue non magna volutpat, ac vulputate ante aliquet. Ut fermentum dolor felis, nec aliquam sem hendrerit sit amet.
                <br>
                <br>Integer lacus tortor, auctor sed magna vitae, efficitur porta odio. Ut eu sagittis sem, et eleifend massa. Mauris quis risus purus. In hac habitasse platea dictumst. Morbi vitae rhoncus mi. Aenean venenatis posuere efficitur. Ut ultrices scelerisque eros sed dignissim. Ut porttitor sollicitudin condimentum. Curabitur tempus magna vel auctor tempor. Aliquam et mollis ipsum. Integer vitae lacus et velit accumsan mollis. Ut eu augue magna. Morbi et feugiat turpis, eu venenatis leo.
                <br>
                <br>Phasellus commodo libero facilisis lorem porttitor varius. Mauris justo risus, ultricies et consequat quis, imperdiet ac orci. Nunc et nibh a tortor malesuada varius. Morbi pretium pharetra mauris, nec ultrices mauris hendrerit at. Mauris finibus sem a blandit pretium. Vivamus quis gravida felis. Etiam vel pulvinar urna, vel rhoncus lacus. Pellentesque finibus dignissim euismod.
            </p>   
            <p class="d-4">
                <img src="news-previews/2.jpg" alt="#" class="nimg-2">
                Donec dapibus dignissim fermentum. Integer hendrerit aliquet ante. Pellentesque convallis rhoncus neque, et elementum augue tincidunt vel. Nulla dictum semper tellus eu fringilla. Suspendisse venenatis, dolor quis mattis facilisis, neque sem commodo augue, ut suscipit metus ex non massa. Proin condimentum mattis viverra. Proin ac posuere nulla. Nulla et elit tincidunt, suscipit odio in, fringilla turpis. Aliquam feugiat arcu eget augue elementum pretium. Praesent efficitur libero luctus enim volutpat, ac dignissim nisi ullamcorper. Duis vestibulum diam odio, sed porttitor metus euismod non. Nulla arcu justo, tempor id libero sit amet, iaculis tempor felis. Quisque id elit purus. Pellentesque tincidunt odio leo, sed eleifend libero tincidunt non.
                <br>
                <br>Donec at faucibus nisl, ut laoreet leo. Nulla pharetra quam ut urna suscipit, nec consequat leo fermentum. Phasellus eu lacus nibh. Etiam luctus id orci at laoreet. Donec auctor sapien ut mi pellentesque hendrerit non sit amet metus. Pellentesque at sem eu dolor tincidunt iaculis. Vivamus lobortis metus et ex sollicitudin ornare. Donec sodales rhoncus rhoncus. Maecenas laoreet condimentum vulputate. Vestibulum blandit congue sapien viverra laoreet. Fusce posuere turpis a arcu lobortis viverra. Cras feugiat purus a erat semper, nec facilisis augue mollis. Vestibulum dapibus metus posuere facilisis condimentum. Phasellus vel augue maximus, varius sem ut, luctus magna. Nunc libero ex, iaculis nec dui quis, pharetra pulvinar neque.
                <br>
                <br>Proin sed tellus nec eros fringilla facilisis. Nullam quis sem sed magna sagittis scelerisque a eu leo. Integer bibendum massa tellus, quis efficitur risus ultrices pharetra. Nam eget tellus quis risus vestibulum semper ac vel augue. Aliquam lobortis, massa id fringilla varius, turpis leo sollicitudin lectus, at placerat lorem neque eu ipsum. Morbi id velit ut augue posuere sodales. Etiam commodo elit neque, non tincidunt libero feugiat non. Etiam at est diam. Cras eget vehicula mauris. Vivamus sit amet euismod nulla. Etiam nec magna tempus, efficitur nisi vel, tempus nunc.
            </p>
            <p class="d-6">
            </p>
            <p class="d-7">
                Ut vel erat eget libero tempor pharetra at quis mi. In hac habitasse platea dictumst. Vestibulum bibendum auctor arcu, in gravida augue interdum at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam aliquet nibh at sollicitudin cursus. Aliquam dapibus nec magna sed efficitur. Quisque sit amet orci nisi. Ut ornare semper mauris eget iaculis. Nulla quis ligula enim. Aliquam dolor ipsum, aliquet eu enim et, pulvinar posuere arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget enim condimentum, fermentum lorem ac, pharetra tellus. Nulla est felis, facilisis ut auctor eget, gravida eget augue.
            </p>
            <p class="d-8">
                Sed ac cursus felis. Curabitur blandit nulla nec tempor egestas. Duis a hendrerit mauris, a pellentesque ex. Sed arcu lacus, mollis vel semper in, gravida elementum eros. Etiam ornare urna ex, eu dignissim nisl maximus ac. Nullam quam eros, congue nec lobortis quis, euismod et massa. Nam in aliquet justo. Donec eget augue eu nibh pharetra volutpat ac at urna. Duis sit amet ex nisl. Sed vel sem a nulla mollis aliquet faucibus in purus. Cras accumsan, eros et eleifend hendrerit, enim enim elementum sem, vel dictum nisi orci in massa. Phasellus semper, turpis at sollicitudin ornare, lectus justo pellentesque odio, ut pulvinar dui eros eget lacus. Nulla rutrum dui sed nisi tempor, sit amet dignissim dui volutpat. Nunc nec justo dolor. In hac habitasse platea dictumst. Praesent malesuada, lorem vel sagittis vestibulum, mauris libero consequat mauris, vitae faucibus leo eros vel urna.
            </p>
            <p class="d-9">
                <img src="news-previews/3.jpg" alt="#" class="nimg-3">
                Nulla eget nibh fringilla, ornare enim non, placerat ligula. Donec vitae sem lectus. Proin cursus diam quis arcu placerat lobortis. In hac habitasse platea dictumst. Nullam fringilla ultricies ex sit amet pretium. Sed ut rutrum lacus, vitae porttitor arcu. Fusce sed enim quis nunc hendrerit accumsan in vel nisi. Ut nisl nisi, varius non pulvinar a, venenatis ac lorem. Phasellus scelerisque mauris quam, vel dictum velit iaculis elementum. Etiam et ligula bibendum, convallis quam eu, varius dolor. Nulla facilisi. Nullam justo leo, tempus at massa eget, fermentum finibus dolor. Phasellus non ornare felis. Cras quis lobortis erat. Sed et enim a lacus euismod facilisis ac id mauris. Suspendisse lobortis purus libero, eleifend eleifend ligula vulputate hendrerit.
                <br>
                <br>Duis scelerisque varius diam ac vestibulum. Fusce euismod, nulla at egestas lobortis, sapien diam aliquet purus, vel elementum mauris nunc eget nibh. Ut consectetur augue vel viverra ornare. Nam quis justo tortor. Curabitur nec enim tincidunt, dapibus nulla eu, euismod massa. Vestibulum elementum nibh magna, vel iaculis elit commodo quis. Maecenas ut lacinia magna, eget faucibus elit. Vestibulum laoreet nulla mauris, in laoreet nisi convallis ut. Morbi ac viverra elit. Vestibulum accumsan massa ac leo semper, ac auctor erat vestibulum. Vivamus venenatis et dolor vel sagittis. Praesent placerat sit amet urna non venenatis. Donec vel aliquam lacus. Sed quis purus vitae lectus egestas elementum. Mauris ultrices, purus a pellentesque porta, neque nisi suscipit diam, vel placerat arcu neque ut nisl. Praesent dictum consequat suscipit.
                <br>
                <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus neque arcu, ultrices a enim ac, gravida ullamcorper dolor. Maecenas laoreet odio quam, at lacinia felis congue sed. Nam vel tempus ligula. Ut ex orci, tristique eu arcu ac, accumsan porta ligula. Mauris quam urna, dignissim sed urna id, lobortis congue ante. Sed sem tortor, suscipit et imperdiet a, luctus in est. Etiam congue condimentum dui, eu euismod quam tincidunt sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elit lorem, vehicula posuere ex ac, molestie eleifend odio. Aenean hendrerit purus sed quam vestibulum suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam dui orci, convallis ac ultrices nec, euismod sit amet odio. Fusce fermentum, dui in sollicitudin placerat, elit turpis posuere nulla, nec gravida massa sem sit amet velit. Aliquam dapibus nisi sit amet nisi pharetra, vitae consectetur arcu consectetur. Aenean quis mauris pretium, rutrum felis sed, cursus nulla. Praesent consequat lorem quis eros pharetra sodales.
                <br>
                <br>Nullam dignissim sit amet lacus in condimentum. Nunc accumsan nulla id nisl consequat, in tincidunt ex pharetra. Phasellus consequat lectus felis, sed tincidunt nibh consectetur nec. Nunc nunc ipsum, consectetur ac molestie vestibulum, lacinia aliquet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis eu purus vel sagittis. Suspendisse luctus congue dignissim. In vel turpis quis dui vulputate venenatis. Curabitur malesuada pulvinar nibh in venenatis. Cras in rutrum ligula. Quisque felis est, fringilla ac libero sed, maximus feugiat diam. Proin ac gravida metus.
            </p>
        </div>

        <div class="top-btn" id="topBtn"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="js/topBtn.js"></script>
        <script src="js/burger.js"></script>
    </body>
</html>

1 ответ 1

0

Вот на чистом JS:

let naviUA = navigator.userAgent
if(naviUA.includes('Android')||naviUA.includes('iPhone')) {
  if(window.screen.availWidth < 767) {
    document.querySelectorAll('.top-news').forEach(function(el) {
      el.style.width = '100%';
    })
  }
}

Используя jQuery:

let naviUA = navigator.userAgent
if(naviUA.includes('Android')||naviUA.includes('iPhone')) {
  if(window.screen.availWidth < 767) {
    $('.top-news').each(function() {
      $(this).css('width', '100%');
    })
  }
}
1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Grundy
    21 мар 2022 в 18:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.