Блог Tumblr: Как исправить проблему с количеством столбцов в полях «Отправить страницу» и «Страница вопросов»?

Я новичок в HTML и CSS, и у меня возникли некоторые проблемы с пользовательским макетом моего нового блога на Tumblr.

Вот ссылка на блог: https://wojakgallery.tumblr.com/

Как вы можете видеть по ссылке выше, я использую сетку из 6 столбцов для сообщений.

Проблема, которую я вижу, заключается в моих страницах «Отправить» и «Спросить» при просмотре в браузере на ПК (не на мобильном телефоне).

Например, как вы можете видеть на моей странице отправки, поле отправки слишком маленькое для содержимого (из-за чего вы не можете просмотреть его полностью), поле столбца отправки должно быть больше.

Однако когда я редактирую количество столбцов CSS, раздел «.grid» ниже влияет на все сообщения во всем блоге, поэтому, если я изменю количество столбцов на «column-count: 1;», все сообщения в блоге будут отображаться в 1 столбец.

.grid section {
        column-count: 6;
        break-inside: avoid;
        grid-gap: var(--spacing);
        margin-bottom:var(--spacing);
              }

Как я могу разделить страницы «Отправить» и «Спросить», чтобы иметь только 1 столбец и центрироваться, сохраняя при этом остальные обычные сообщения в блоге с «количество столбцов: 6;»?

Есть ли способ разделить коды столбцов сетки HTML и CSS для определенных страниц, таких как «Отправить» и «Спросить»?

Ниже приведен полный HTML и CSS-код моего блога.

<!DOCTYPE html>
    <!-- A custom theme built by eggdesign's theme builder (buildatheme.tumblr.com) -->
    <html> 
        <head>
        <!-- BEGIN: Powered by Supercounters.com -->
<center><script type = "text/javascript" src = "//widget.supercounters.com/ssl/online_i.js"></script><script type = "text/javascript">sc_online_i(1684521,"ffffff","#283966");</script><br><noscript><a href = "https://www.supercounters.com/">free online counter</a></noscript>
</center>
<!-- END: Powered by Supercounters.com -->
        
            <title>{Title}</title>
            <meta name = "viewport" content = "width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
            <link rel = "shortcut icon" href = "{Favicon}">
            <link rel = "alternate" type = "application/rss+xml" href = "{RSS}">
            {block:Description}<meta name = "description" content = "{MetaDescription}" />{/block:Description}
            {block:Options}
            <meta name = "color:background" content = "#fff"/>
            <meta name = "color:posts" content = "#fff"/>
            <meta name = "color:text" content = "#000"/>
            <meta name = "color:links" content = "#000" />
            <meta name = "color:tags" content = "#000" />
            <meta name = "color:sidebar links" content = "{AccentColor}"/>
            <meta name = "color:search background" content = "#fff" />
            <meta name = "color:search text" content = "#000"/>
            <meta name = "color:borders" content = "#ddd"/>
            <meta name = "text:border width" content = "1px"/>
            <meta name = "text:border radius" content = "4px"/>
            <meta name = "text:font size" content = "16px" />
            <meta name = "image:background" content = ""/>
            <meta name = "color:night mode accent" content = "#fff" />
            <meta name = "if:Remove background image in night mode" content = ""/>
            <meta name = "if:full background" content = ""/>
             
            <meta name = "select:Font" content = "Helvetica" title = "Helvetica" />
            <meta name = "select:Font" content = "Roboto" title = "Roboto" />
            <meta name = "select:Font" content = "Favorit" title = "Favorit" />
            <meta name = "select:Font" content = "Calluna" title = "Calluna" />
            <meta name = "select:Font" content = "Fairwater" title = "Fairwater" />
            <meta name = "select:Font" content = "Source Code Pro" title = "Source Code Pro" />
            {/block:Options}

            {NewPostStyles}
            <script>
                const themed = localStorage.getItem('night-mode');
                if (themed === "enabled") {
                    sessionStorage.setItem('night-mode', 'enabled');
                    document.documentElement.classList.add('night-mode-theme');
                }
            </script>

            <script src = "https://static.tumblr.com/svdghan/gFJrolu7g/daynight.js"></script>
             
             <style>
             @import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');

                * {
                    box-sizing: border-box;
                }
                :root {
                    --background-image:  url({image:background});
                    --background: {color:background};
                    --accent: {AccentColor};
                    --text: {color:text};
                    --borders: {color:borders};
                    --spacing: 1rem;
                    --border-width: {text:border width};
                    --border-radius: {text:border radius};
                    --posts: {color:posts};
                    --tags: {color:tags};
                    --links: {color:links};
                    --sidebar-links: {color:sidebar links};
                    --search-background: {color:search background};
                    --search-text: {color:search text};
                    --headerimage: url({HeaderImage}); 
                    --invert: invert(0);
                    --night-mode-accent: {color:night mode accent};
                     
                }
                
                .night-mode-theme {
                    --background: #000!important;
                    --accent: var(--night-mode-accent);
                    {block:ifRemoveBackgroundImageInNightMode}
                    --background-image: url('');
                    {/block:ifRemoveBackgroundImageInNightMode}
                    --text: white;
                    --posts: #222;
                    --invert: invert(1);
                    --links: var(--night-mode-accent);
                    --tags: var(--night-mode-accent);
                }
                
                body {
                    font-family: {select:Font}, sans-serif;
                    font-size: clamp(.92rem, {text:font size}, 20px);
                    margin: 0;
                    height: 100vh;
                    color: var(--text);
                    background: var(--background) var(--background-image) center center fixed;
                    {block:iffullbackground}
                    background-size: cover;
                    {/block:iffullbackground}}
                
                a {
                    color: var(--links);
                }
                
                header {
                    margin:var(--spacing) auto;
                    max-width:1100px;
                    padding:var(--spacing);
                    background:var(--posts);
                    border: var(--border-width) solid var(--borders);
                    border-radius:var(--border-radius);
                }
                
                article a {
                    text-decoration: none;
                }

                article a:hover {
                    text-decoration: underline;
                }

                article iframe, .tumblr_video_container {
                    max-width: 100%;
                }

                .blog-title {
                    font-family: {TitleFont};
                }

                main, .pagination {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    justify-content: space-around;
                }

                main {
                    max-width:1100px;
                    margin:auto;
                }

                article, .pagination {
                    width: 100%;
                    position:relative;
                    max-width: 400px;
                    margin: calc(var(--spacing) * 4) auto;
                    border: var(--border-width) solid var(--borders);
                    border-radius: var(--border-radius);
                    background:var(--posts);
                }
                aside .pagination {
                    margin: var(--spacing) auto auto auto;
                }

                article img {
                    max-width: 100%;
                }

                .link-container {
                    padding: var(--spacing);
                    margin:var(--spacing);
                    border:var(--border-width) solid var(--borders);
                    border-radius: var(--border-radius);
                }

                .caption:empty, p:empty {
                    display:none;
                }

                .reblog-header a {
                    display: flex;
                    align-items:center;
                }

                .reblog-header img {
                    padding-right: .4rem;
                    max-height: 1.4rem;
                }
                .contained :is(header, footer, main) {
                    width: 100%;
                    max-width: 1000px;
                    margin: 1rem auto;
                    background: var(--background);
                    border: var(--border-width) solid var(--borders);
                }

                .contained header {
                    margin-bottom: 0;
                    padding: var(--spacing);
                }
                .contained main {
                    height: 70vh;
                    overflow: auto;
                    
                }

                .contained article, .contained .pagination {
                    max-width: 500px;
                }

                .grid main {
                    max-width: 98%;
                }

                .grid section {
                    column-count: 6;
                    break-inside: avoid;
                    grid-gap: var(--spacing);
                    margin-bottom:var(--spacing);
                }

                .grid article {
                    display: inline-block;
                    max-width: calc(100% - (var(--spacing) / 2));
                    margin: var(--spacing) 0;
                }

                .original-post, .reblog-header, .tags, .post-info, .pagination, .quote-container, .replies, .question {
                    padding: var(--spacing);
                }

                .reblog-content p, .reblog-content h2, .reblog-content h1 {
                    margin-left: var(--spacing);
                    margin-right: var(--spacing);
                }

                .quote-container, .replies, .question {
                    border: var(--border-width) solid var(--borders);
                    margin: var(--spacing);
                }

                .description, aside h2 {
                    padding: calc(var(--spacing) /2) 0;
                    margin: 0;
                }
                   #search-form input {
                    padding: calc(var(--spacing) / 2);
                    width:100%;
                    background:var(--search-background);
                    margin: calc(var(--spacing) /2) 0 0 0;
                    border:var(--border-width) solid var(--borders);
                    border-radius:var(--border-radius);
                    color:var(--search-text);
                 }
                ::placeholder {
                     color:var(--search-text);
                 }
                
                .post-info, .like-and-reblog, .contained {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                }
                .pinned {
                    font-weight:bold;
                    color:var(--accent);
                }

                .pinned {
                    font-weight:bold;
                }
                .pinned-default {
                    padding:var(--spacing);
                }
                   
                .like-and-reblog .reblog_button, .like-and-reblog .like_button:not(.liked) {
                    filter: var(--invert);
                }
                 section {
                    width: 100%;
                 }
                
                    header {
                        width: 100%;
                    }
                
                .pages-container, .nav-container {
                    margin: calc(var(--spacing) /4) 0;
                }
                .pages-container a, .nav-container a, .pagination a, .tags a {
                    display: inline-block;
                    margin-right: .4rem;
                    color: var(--text);
                    text-decoration:none;
                }

                aside a {
                    color: var(--sidebar-links);
                }

                .tags a {
                    color: var(--tags);
                }

                .pages-container a {
                    font-weight:bold;
                    color:var(--accent);
                }

                .reblogs a, .caption a {
                    color:var(--accent);
                }

                .tumblr_audio_player {
                    width: 100%;
                }

                @media only screen and (max-width: 1100px) {
                    main, .contained main, section {
                        width: 100%;
                        height: auto;
                    }
                    
                    article {
                        max-width:90%;
                        margin: var(--spacing) auto;
                    }
                    
                    .grid section {
                        column-count: 1;
                    }

                }

                .screen-reader {
                    border: 0;
                    clip: rect(1px, 1px, 1px, 1px);
                    clip-path: inset(50%);
                    height: 1px;
                    margin: -1px;
                    overflow: hidden;
                    padding: 0;
                    position: absolute;
                    width: 1px;
                    word-wrap: normal !important;
                }
                #daynight-toggle {
                    cursor:pointer;
                    background:;
                    position:fixed;
                    top:var(--spacing);
                    left:var(--spacing);
                    z-index:2;
                    height:2rem;
                    width:2rem;
                    border-radius:50%;
                    background:white;
                    display:flex;
                    border:var(--border-width) solid var(--borders);
                    flex-wrap:wrap;
                    justify-content:center;
                    align-items:center;
                }
                
                #daynight-toggle:before {
                    content:'☀';
                }
                
                #daynight-toggle.night-mode-toggle:before {
                  content:'';
                  width:1rem;
                  height:1rem;
                  transform:translate(-.32rem, -.32rem);
                  border-radius: 50%;
                  box-shadow: .32rem .32rem 0 0 black;
                }
                
                {CustomCSS}
            </style>
        </head>
        <body class = "grid {block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
           
           <!-- Day/Night Toggle start <button id = "daynight-toggle"><span class = "screen-reader">toggle day and night mode</span></button> End -->  
           
           <header>  {block:ShowTitle}
            
           <a style = "text-decoration: none; color:#0c1630;" href = "https://wojakgallery.tumblr.com/"><h2 class = "blog-title">{Title}</h2></a> 
            
            {/block:ShowTitle}
            <div class = "description">{Description}</div>
                    <div class = "nav-container">
                    <a href = "https://wojakgallery.tumblr.com/"><b>[Home]</b></a>
                        <a href = "https://wojakgallery.tumblr.com/random"><b>[Random Post]</b></a>
                        {block:askenabled}
                            <a href = "/ask"><b>[Ask]</b></a>
                        {/block:askenabled}
                        {block:submissionsenabled}
                            <a href = "/submit"><b>[Submit]</b></a>
                        {/block:submissionsenabled}
                        <a href = "/archive"><b>[Archive]</b></a>
                    </div> 
                      {block:HasPages}
                        <div class = "pages-container">
                            {block:Pages}
                                <a href = "{URL}">{Label}</a>
                            {/block:Pages}
                            </div>
                        {/block:HasPages}
                        <form action = "/search" method = "get" id = "search-form">
                            <input type = "text" name = "q" class = "query" value = "" placeholder = "🔍 Search Tags (type & hit enter)">
                        </form></header>
                 
            <main>
                <section>
                
                    {block:SearchPage}
                        <article>
                            <div class = "reblogs">{lang:Found SearchResultCount results for SearchQuery}
                                <div class = "Sorry" style = "margin-left:5px;">
                                {block:NoSearchResults}
    <p>Sorry, no listings are tagged with "{SearchQuery}."</p>
{/block:NoSearchResults}
</div>                        
 </div>
 </article>                                                  
                    {/block:SearchPage}
                    
                    {block:TagPage}
                        <article>
                            <div class = "reblogs">{lang:Showing TagResultCount posts tagged Tag}</div>
                        </article>
                    {/block:TagPage}
                    {block:DayPage}
                        <article>
                            <div class = "reblogs">{lang:Viewing everything posted on Month DayOfMonth Year}</div>
                        </article>
                    {/block:DayPage}
                    {block:Posts}
                    <!-- {block:NoRebloggedFrom}
                    
                    {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
                    {/block:NoRebloggedFrom} -->
                    {block:ContentSource}<!-- {SourceURL}
                    {block:SourceLogo}<img src = "{BlackLogoURL}"width = "{LogoWidth}" height = "{LogoHeight}" alt = "{SourceTitle}" />{/block:SourceLogo}
                    {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
                    {/block:ContentSource} 
                    <article id = "post-{PostID}">
                        {block:PinnedPostLabel}<div class = "pinned pinned-default"><i></i>{PinnedPostLabel}</div>{/block:PinnedPostLabel}
                         
                                
                                {block:RebloggedFrom}
                                    <div class = "reblog-header">
                                        <a href = "{permalink}" {block:isdeactivated}class = "inactive"{/block:isdeactivated}>
                                        <img src = {ReblogRootPortraitURL-64} alt = "{ReblogRootName}">  {ReblogRootName}
                                        </a>
                                    </div>
                                {/block:RebloggedFrom}
                                {block:Photo}
                                    <img src = "{PhotoURL-HighRes}" alt = "{photoalt}" class = "photos">
                                {/block:Photo}

                                {block:Photoset}
                                    {Photoset}
                                {/block:Photoset}
                                    
                                {block:Panorama}
                                    <img src = "{photourl-panorama}" alt = "{photoalt}">
                                {/block:Panorama}
                                        
                                {block:Quote}
                                
                                    <div class = "quote-container">
    
                                        <div class = "quote">
                                            "{Quote}"
                                        </div>
                                        <div class = "source">
                                            -{Source}
                                        </div>
                                    </div>
                                    
                                    
                                {/block:Quote}
                                          
                                {block:Chat}
                                    <ul class = "chat">
                                        {block:Lines}
                                            <li>
                                                {block:Label}{Label}{/block:Label} 
                                                {Line}
                                            </li>
                                        {/block:Lines}
                                    </ul>
                                {/block:Chat}

                                {block:link}
                                    <div class = "link-container">
                                        <a href = "{URL}">
                                            {Name}
                                        </a>
                                    </div>
                                {/block:link}
                                              
                                {block:Video}
                                    {Video-700}
                                {/block:Video}
                                    
                                {block:Audio}
                                    {audioembed}
                                {/block:Audio}
         
                                {block:Answer}
                                    <div class = "question">
                                        {Asker}: {Question}
                                    </div>
                                    {block:Answerer}
                                    <div class = "replies">
                                        {Answerer}: {Answer}
                                    </div>
                                    {/block:Answerer}
                                {block:NotReblog}
                                    <div class = "replies">
                                        {Replies}
                                    </div>
                                {/block:NotReblog}
                                {/block:Answer}
                                <!-- captions  -->
                                <div class = "caption {block:notreblog} original-post {/block:notreblog}">
                                    {block:Text}
                                    
                                        {block:Title}<h2>{Title}</h2>{/block:Title}
                                     
                                    {/block:Text}
                                    <hr>
                                    {block:notreblog}
                                    {block:caption}{Caption}{/block:caption}
                                    {block:Text}{body}{/block:Text}
                                    {/block:notreblog}
                                    {block:Rebloggedfrom}
                                        {block:Reblogs}
                                        <div class = "reblogs">
                                        {block:IsNotOriginalEntry} 
                                            <div class = "reblog-header">
                                                <a href = "{permalink}" {block:isdeactivated}class = "inactive"{/block:isdeactivated}>
                                                      <img src = {PortraitURL-64} alt = "{username}">  {username}
                                                    </a>
                                            </div>
                                        {/block:IsNotOriginalEntry} 
                                            <div class = "reblog-content">
                                                {Body}
                                            </div>
                                        </div>
                                        {/block:Reblogs}
                                    {/block:RebloggedFrom}
                             
                             <hr>  
                             <div class = "container">
                             
                             <div class = "topleft">
                             {LikeButton}</div>
                             <div class = "topright">
                             {ReblogButton}</div>
                                 
                             </div>   
                             
                                </div>
                                
                                
                                <!–– START DATE POSTED AND TAGS ––>
                                
                                
                                 {block:Date}<div class = "post-info">
                                <div class = "note-info">
                                    <a href = "{Permalink}">Posted <a href = "/day/{year}/{MonthNumberWithZero}/{DayOfMonth}">{TimeAgo}</a> with <a href = "{Permalink}"> {NoteCountwithLabel}</a></div>
                                
                                </div>{/block:Date}  
                                
                                
                            {block:PermalinkPage}    
                            {block:Hastags}
                            <div class = "tags">
                                {block:Tags}
                                <a href = "{TagURL}">#{Tag}</a>
                                {/block:Tags}
                            </div>
                        {/block:Hastags}
                        {/block:PermalinkPage}
                        
                        
                        <!–– END DATE POSTED AND TAGS ––>
                                
                             
                        {PostNotes}
                    </article>
                    {/block:Posts}
                     
                {block:Pagination}
                <div class = "pagination flex centered">
                    {block:previouspage}
                    <a href = "{previouspage}">Prev</a>
                    {/block:previouspage}
                        {block:JumpPagination length = "5"}
                            {block:CurrentPage}
                            <span class = "current-page">
                                {PageNumber}
                            </span>
                            {/block:CurrentPage}
                            {block:JumpPage}
                            <a href = "{URL}">
                                {PageNumber}
                            </a>
                            {/block:JumpPage}
                        {/block:JumpPagination}
                    {block:nextpage}
                    <a href = "{nextpage}">Next</a>
                    {/block:nextpage}
                </div>
                {/block:Pagination}
                 </section></main>
            </body>
        </html>
            

Дополнительный пользовательский CSS:

.blog-title {
    font-family: {TitleFont};
    font-size: 30px;
                }

.pages-container, .nav-container {
                    margin: calc(var(--spacing) /1) 0;
                    
                }
 
 .pages-container a {
        background:linear-gradient(to bottom, #290c9d 5%, #290c9d 100%);
    background-color:#290c9d;
    border-radius:5px;
    border:1px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Helvetica;
    font-size:17px;
    padding:6px; 18px; 
    text-decoration:none;
    text-shadow:0px 1px 6px #283966;
    margin-bottom:0px;
    margin-top:4px;

background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    background-color:#476e9e;
    position:relative;
    margin-right:0px;
    
                }
             
             
              /* LIKE BUTTON AND REBLOG BUTTON START */ 
             
             .container {
  position: relative;
}   
         
         
         .topleft {
  position: absolute;
  top: 4px;
  left: 0px;
  font-size: 18px;
}

 .topright {
  position: absolute;
  top: 4px;
  left: 25px;
  font-size: 18px;
}

   /* LIKE BUTTON AND REBLOG BUTTON END */ 
   
   


Я делал это много раз, используя небольшой фрагмент JavaScript. Смотрите мою вторую часть ответа здесь: stackoverflow.com/a/70473354/1238244

lharby 18.02.2024 08:48

Если это не имеет смысла или вы не можете заставить его работать, я опубликую здесь кое-что позже сегодня.

lharby 18.02.2024 08:49
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
147
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, я проверил ваш блог на Tumblr, и кажется, что классы уже передаются на страницы отправки и запроса, так что вы можете настроить их таргетинг через CSS.

Вот как бы я это сделал

<style>
/* use this css which is already in the theme to target standard index, post pages etc. */
.grid section {
    column-count: 6;
    break-inside: avoid;
    grid-gap: var(--spacing);
    margin-bottom: var(--spacing);
}

/* extend the css for ask/submit pages */
body.submit--page .grid section,
body.ask-page .grid section {
    column-count: unset // reset the column-count property
    grid-gap: 0;
    // add another styles here you only want to target on these pages
}
</style>

Это должно сделать все, что вам нужно, но охватывает только эти две страницы.

Если вам нужно более комплексное решение для добавления класса на любую страницу (и, следовательно, возможность ориентироваться конкретно на CSS), дайте мне знать. Но это описано в другом ответе, на который я дал ссылку.

Я не уверен, почему submit--page имеет двойное тире, а ask-page только одно, но, по крайней мере, каждая страница имеет уникальный идентификатор.

РЕДАКТИРОВАТЬ

Извиняюсь, я только что снова заметил в вашей теме, что класс grid также применяется к телу. Следовательно, body.submit--page .grid section не существует, поскольку сетка не является дочерним элементом тела, это тот же элемент.

Измените селекторы на

body.submit--page section,
body.ask-page section {
    // styles...

РЕДАКТИРОВАТЬ 2

Для обработки настольных/мобильных устройств вам необходимо обновить медиа-запросы.

Найдите этот код в своей теме (это для мобильных устройств)

media only screen and (max-width: 1100px)
.grid section {
    column-count: 1;
}

Если мобильный телефон всегда представляет собой один столбец, это нормально.

Для настольных компьютеров и мобильных устройств это должно охватывать (обратите внимание, что сейчас вы задаете вопросы специфичности)

/* desktop */
body.submit--page section,
body.ask-page section {
    column-count: 3 // add your column count for desktop here
    grid-gap: 0;
}

/* mobile/tablet */
media only screen and (max-width: 1100px)
    body.submit--page section,
    body.ask-page section {
        column-count: 1; // reset columns to 1 for mobile
}

Я добавил следующее в CSS, но ничего не изменилось. Есть идеи, есть ли что-то, что мне не хватает? /* расширяем CSS для страниц запроса/отправки */ body.submit--page .gridsection, body.ask-page .gridsection { columns-count: 1; разрыв сетки: 0; }

GFB 19.02.2024 21:43

Извините моя ошибка. Я обновлю свой ответ.

lharby 19.02.2024 22:21

Это сработало. ТИ. И последнее: когда я добавляю код из вашего редактирования, это также влияет на мобильные устройства. Мне нужно, чтобы в мобильном представлении было 1 столбец, а в представлении ПК — 3 столбца. Есть идеи, как я могу это сделать?

GFB 20.02.2024 17:09

@GFB Я добавил медиа-запрос CSS (он уже есть в вашем шаблоне, вам следует передать стили для мобильных устройств в этот запрос CSS)

lharby 20.02.2024 18:56

Хорошо, вот код, который я использую для мобильных устройств, но на мобильных устройствах он продолжает отображаться в 3 столбцах вместо 1 (который я хочу для мобильных устройств), кажется, он все еще продвигает код рабочего стола, для которого установлено 3 столбца. @media only screen и (максимальная ширина: 1100 пикселей) {main, .contained main,section {width: 100%; высота: авто;} статья {максимальная ширина: 90%; маржа: var(--spacing) auto;} .grid раздел {количество столбцов: 1;} body.submit--раздел страницы, раздел body.ask-page {количество столбцов: 1; разрыв сетки: 0;} }

GFB 20.02.2024 21:10

@GFB, можешь ли ты сбросить для меня весь текущий шаблон в Pastebin и опубликовать здесь URL? astebin.com В вашем CSS есть и другие селекторы, но тогда я смогу исправить все за один раз.

lharby 20.02.2024 21:38

Здесь: pastebin.com/ACXe0tBj

GFB 20.02.2024 22:19

ТЫСМ! Теперь команды «Отправить» и «Спросить» доступны как на настольных компьютерах, так и на мобильных устройствах с вашим кодом вставки.

GFB 21.02.2024 21:42

Рад, что мы в конце концов туда попали.

lharby 21.02.2024 22:19

Другие вопросы по теме

Похожие вопросы

Как центрировать элементы диаграммы по горизонтали и вертикали в сетке
Проблема с гамбургер-меню - навигационное меню не исчезает
Пытаюсь изменить цвет квадрата в сетке на html-холсте, но не работает, и понятия не имею, почему, на этом этапе дважды проверено сто раз
Лучшая практика HTML/CSS для многократно используемых изображений (150+ на страницу)
Функция срабатывает до полной загрузки сайта
Добавьте первый параметр по умолчанию в качестве элемента выбора при заполнении параметров выбора из поля перечисления в ASP.NET Core
В сетке CSS, как я могу сделать каждый столбец равным 1/3 (мин) и 1/2 (макс) в зависимости от количества столбцов?
Как оставить раскрывающийся список открытым после наведения (только с помощью CSS)
Использование jQuery для окраски фона, текста и SVG при прокрутке
CSV-файл не передается при отправке html-формы с помощью метода POST (в контексте использования Django)