I'm very new to HTML and CSS, and I've been having some trouble with my new Tumblr blog's custom layout.
Here's the blog link: https://wojakgallery.tumblr.com/
As you can see in the link above I'm using a grid with 6 columns for the posts.
The problem I see is in my Submit and Ask pages when viewing from a browser on PC (not mobile).
For example, as you can see in my Submit page, the submit box is too small for the content (making you unable to view it fully), the submit column box needs to be bigger.
However, when I edit the CSS column count, the ".grid section" below affects all posts on the whole blog, so if I change the column count to "column-count: 1;", all posts on the blog are displayed in 1 column.
.grid section {
column-count: 6;
break-inside: avoid;
grid-gap: var(--spacing);
margin-bottom:var(--spacing);
}
How can I separate the Submit and Ask pages to have only 1 column count and centered, while keeping the rest of the other normal posts on the blog with "column-count: 6;"?
Is there a way to separate the HTML and CSS grid column codes for specific pages like Submit and Ask?
Below is the full HTML and CSS code of my Blog.
<!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>
Extra Custom 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 */
So I checked your tumblr blog and it seems as though classes are already being passed to the submit and ask pages, so you can target them through css.
This is how I would do it
<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>
This should do everything you need, but only covers those two pages.
If you want a more comprehensive solution to add a class to any page (and therefore be able to target the css specifically) let me know. But it is covered in the other answer I linked to.
I am not sure why submit--page has a double dash and ask-page only one, but at least each page has a unique identifier.
EDIT
Apologies, I just noticed again in your theme, that the grid class is also applied to the body. Hence body.submit--page .grid section does not exist as grid is not a child of the body, it is the same element.
Change the selectors to
body.submit--page section,
body.ask-page section {
// styles...
EDIT 2
To handle desktop/mobile you need to update media queries.
Find this code in your theme (this is for mobile)
media only screen and (max-width: 1100px)
.grid section {
column-count: 1;
}
If mobile is always a single column then this is fine.
For desktop and mobile this should cover it (note you are now entering specifity issues)
/* 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
}