/r/q?req.query.q -- Subreddit Search

18,341 Subscribers

How to add <h1> tag without break the site layout?

Hello, can someone give me some help here, please?

How to add <h1> tag in the <?php echo substr(get_the_title($post_name), 0, 20); ?> without break the site layout?

<div class="blkBar topratings">
<i class="galBIcon"></i>
<?php echo substr(get_the_title($post_name), 0, 20); ?>
<span class="custom-rating">
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
<span class="page_post-titl">Gallery Rating</span>
</span>
</div>

This is how it looks without the <h1> tag: https://prnt.sc/GtjJMyKvgNMG

This is how it looks after I add the post title between the <h1> tags: https://prnt.sc/vVkWRU9Nxqcf

<h1><?php echo substr(get_the_title($post_name), 0, 20); ?></h1>

.blkBar, .grnBar {
margin: 15px 0px;
background: #000 url(../images/bar-pnk.png) right top no-repeat;
border-radius: 5px;
padding: 5px 15px 2px;
font-size: 24px;
line-height: 36px;
color: #fff;
font-family: 'AvenirNextLTPro-Bold';
text-align: left;
text-transform: uppercase;
position: relative;
}
span.custom-rating {
display: block;
margin-top: -5px !important;
margin-bottom: 0px !important;
height: 43px;
width: 237px;
position: relative;
float: right;
}

I need to show exactly how it looks but with the <h1> tag. Can someone help me, please?

Thank you in advance.

2 Comments

2024/04/10
00:10 UTC

New to CSS I have no idea what I’m doing.

I’m working on a Django polls project and struggling to get the correct font to display. Here’s my code, it’s very basic and the issue is probably located in the only .css file contained in the repo. I’ve tried various solutions like checking the file path in my CSS and ensuring the font file has the proper access permissions. However, the issue persists. Do you have any suggestions on what else I could try to resolve this?

1 Comment

2024/04/10
00:04 UTC

Please can someone check my CSS code. I am trying to create a colouring in book as a project. I am a complete novice, I am unsure about webkit appearance and is there something else i could use? I am unsure if div and i tag are correct. I appreciate all the help I can get, thank you.

.div{
    margin:0px 20px 0px 20px;
    float: left;    
    i{
      color:#A2D2FF;
      float: left;
      position: relative;
      font-size:30pt;
      &:hover{
        opacity:0.7;
        cursor: pointer;
      }

1 Comment

2024/04/08
10:47 UTC

Can anyone help me fix my animation?

I'm trying to create some sort of slider with only one image visible and a css animation will trigger to show the next one.

I created the animation I wanted but I'm struggling to get it fully working, right now the animation only executes well 2 times and perfectly shows the new image. but after that it just show the new image without the animation

This is the code I have right now

0 Comments

2024/04/08
06:44 UTC

Looking for a CSS Study Buddy (2025 Attempt!)

Hi, Sadly , none of my friends are currently preparing for competitive exams. Since I'm aiming for the CSS exam in 2025, I'd love to connect with someone to discuss our studies daily. We could chat about specific subjects, preparation methods, or anything related to the CSS. If anyone here is interested, please let me know! Additionally, I'd be grateful if anyone could recommend any CSS preparation groups I could join. Looking for someone in Lahore would be ideal , thanks

1 Comment

2024/04/07
08:17 UTC

Media Query not working

For some reason I can't add "screen" to my media line in the CSS file and I'm not able to create the responsive layout design I want to achieve. Does anyone have any insight on this issue?

Also, I am using a MBP and for some reason chrome is displaying changes correctly and safari is showing the boxes vertically. This was before I tried changing the flex orientation in the CSS file, but nothing is working. And even though I have the initial scale set to 1, it's displaying zoomed out on my phone.

Git Link

HTML code-

<!DOCTYPE html>

<header>
    <h1>Our Menu</h1>
</header>

 <div class="row">
    

        <div id="item1" class="col-lg-4 col-md-6 col-sm-12">
        <h2 class="protein" id="chicken">Chicken</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, totam error vitae nulla nostrum quaerat debitis eligendi harum eius aspernatur velit id in corrupti sint animi, saepe, rem aperiam illum.</p>
        </div>


   
        <div id="item2" class="col-lg-4 col-md-6 col-sm-12">
        <h2 class="protein" id="beef">Beef</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At eum, molestias alias consectetur nesciunt repudiandae officia ut! Repellendus sequi incidunt rerum, eaque quia, alias ducimus modi sunt eligendi cumque libero.</p>
        </div>
    

    
        <div id="item3" class="col-lg-4 col-md-12 col-sm-12">
        <h2 class="protein" id="sushi">Sushi</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aspernatur, excepturi iure quod vel sed distinctio totam doloremque atque id consequatur ad, amet ducimus facere natus. Et pariatur dignissimos quibusdam?</p>
        </div>
    
    
    </div>
</div>

</body> </html>

CSS code-

*{
box-sizing: border-box;
margin: 0;
padding:0;

}

h1{ text-align: center; font-family: Courier New, monospace; font-size: 250%; }

body{ font-family: Courier New;

}

p { background-color: #dde6d5; border: 1px; text-align: center; margin-top: 0%; font-size: 95%; }

h2.protein{ border: 1px; border-style: groove; font-weight: bold; text-align: center; color: whitesmoke; text-align: end; margin-bottom: 0%; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }

#chicken { background-color: tomato; border: 1px; }

#beef { background-color: #039fdb; border: 1px; }

#sushi { background-color: #FFBD33; border: 1px; }

.row{ display: flex; width: 100%; margin-right: auto; margin-left: auto; padding:5px; }

.container{ position: relative; }

#item1{ display: inline-block; margin: 10px; clear: right; padding-left: 10px;; }

#item2{ display: inline-block; margin: 10px; clear: right; }

#item3{ display: inline-block; margin: 10px; clear: right; padding-right: 10px; }

@media (min-width: 992px) { .col-lg-4 { float: left; clear: right; } .col-lg-4{ width: 33.33%; } }

@media (min-width: 768px) {.col-md-6, .col-md-12{ float:left; clear: both;} } .col-md-6{ width: 50%; } .col-md-12{ width: 100%; }

@media (max-width: 767px) {.col-sm-12 { float:left; } } .col-sm-12{ width: 100%; }

Thanks y'all!

2 Comments

2024/04/03
23:53 UTC

Figma to CSS

Hey guys, a friend of mine is proficient in design and uses Figma for it. I'm good at JS and have written a few projects. However, we want to combine our projects, but neither of us know enough CSS to host it online in the design format.

Any way I can convert the Figma into CSS? I couldn't find any plugin for it.

1 Comment

2024/04/03
19:04 UTC

Am I cooked

I ordered 2 pair of shoes and a zip jacket on CSSbuy for the First time. I got a package with the shoes but Not with the jacket although it says on the App it says that it should have came all together. The Support also doesn‘t give me useable help. The package with the shoes came two weeks ago.

3 Comments

2024/04/02
19:11 UTC

how do I modify the reddit button with a stylus css script

I know the class its this
"box-border relative shrink-0 cursor-pointer
button-medium px-[var(--rem14)]
button-primary
items-center justify-center
button inline-flex "

but idk how to use it in css

0 Comments

2024/04/02
19:03 UTC

Apply Any Squarespace CSS to Mobile Only

Have the perfect Squarespace CSS snippet but only want to apply it on mobile? Here’s the guide you need!
https://ajmexperience.com/learn-posts/apply-squarespace-css-to-mobile

0 Comments

2024/04/02
17:11 UTC

Why isn’t floating sleeve Appear?

.Main Right { Background-image: ____; Background-size: cover Width: 63%; Height: 69vh; Float: right; Position: relative; Right: 0; }

(Main R2 is in div class=“Main_Right”)

.Main_R2 { Height: 69vh; Width: 100%: Background_color: ______; Position: absolute; Right: 0; Top: 0; Display: none; Z-index: 1; }

.Main_R2:hover { Display:block; }

0 Comments

2024/04/01
20:51 UTC

Media query help

media query help

does a media query like max width 600px look at the resolution of the device or at the viewport of the device? for example, an iphone 15 has a resolution of 1179px in width, but has a viewport width of 393px. will the media query of max width 600px include the iphone 15 or not?

2 Comments

2024/04/01
18:58 UTC

Recreating Spotify equalizer inside a jsfiddle

I don’t know the rest of the code.

I was just wondering, what the rest of the code was.

How it was created.

https://open.spotify.com/

https://jsfiddle.net/v1gj9r2f/2/

<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99902 14H5.99902V0H3.99902V14ZM-0.000976562 14H1.99902V4H-0.000976562V14ZM12 7V14H14V7H12ZM8.00002 14H10V10H8.00002V14Z" fill="#1DB954" />
</svg>

Image: https://i.imgur.com/PvpdsZb.png

Here is the gif that is used: https://i.imgur.com/xbbkU5I.gif

But, how is that used with the svg?

What purpose does the svg serve?

How does one get put with the other?

5 Comments

2024/04/01
13:58 UTC

Shrink text with parent div

I'm trying to overlay text and a logo onto an image, which works fine until I change the viewport size.

The image-container div contains an image that fills it, a div with text positioned over it, and a logo image positioned over it.

The objective: everything stays the same relative size until the view-port reduces to the point that the image starts to shrink, at which point the text and the logo will start to shrink maintaining their size relative to the image.

What happens: As soon as I change the view-port enough to shrink the underlying image, the logo graphic shrinks but the text in the text box does not.

My question: How can I make the text in the text box behave like the logo image, shrinking in proportion to the size of the underlying image?

A working demo is at https://barrhavenrotary.ca/dev/overlay/, and the code is below. There's a dashed red box around the text container for the purposes of illustration.

I'll be very grateful for assistance with this.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Superimpose/Overlay Sandbox</title>
<style>
* {font-family:calibri;}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
display: block;
width: 100%;
height: auto;
}
.overlay-text-box {
border:1px dashed red;
position: absolute;
width:60%;
top: 3%;
left:3%;
color: #fff;
padding: 10px 20px;
padding: 3px 0px;
text-align: center;
}
.overlay-text {
position:relative;
color: #fff;
padding: 10px 20px;
padding: 3px 0px;
font-size: 20px;
text-align: center;
}
.overlay-logo {
border:0px solid silver;
position: absolute;
top: 3%;
right:3%;
padding: 10px 20px;
padding: 3px 0px;
text-align: center;
}
.shadow-text {text-shadow: 2px 2px 8px rgba(0,0,0,0.74);}
</style>
</head>
<body>
<h2>TEXT OVERLAY ON IMAGE</h2>

<div class="image-container">
<img src="image.jpg" alt="image">
<div class="overlay-text-box">
<div class="shadow-text overlay-text" style="font-size:160%;">Smallville Children's Charity</div>
<div class="shadow-text overlay-text" style="font-size:140%;">Annual Golf Tournament</div>
<div class="shadow-text overlay-text" style="font-size:120%;">Smallville Country Club - May 13th 2024</div>
</div>

	`<img class="overlay-logo" style="width:12% !important;" src="CGYC_color transparent.png">`

</div>
</body>
</html>

7 Comments

2024/03/30
19:04 UTC

CSS animation doesn't play.

I'm trying to create an effect where the hovered letter spin 360 deg on the y-axis (background-color changes for debugging purpose). But the animation just doesn't play. How can I fix this?

index.html

<div class='titleContainer'>
<span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span>
</div>

style.css

.titleContainer > span { font-size: 4rem; }
.titleContainer > span:hover { background-color: red; animation: flip 2s infinite; } @keyframes flip { 
  0% { transform: rotateY(0deg); } 
  50% { transform: rotateY(180deg); } 
  100% { transform: rotateY(360deg); } 
}

2 Comments

2024/03/29
14:43 UTC

Css media query problem

I apologize in advance if this is a stupid question but i really cant figure it out. im trying to make a website that looks good on all devices, so im using media queries to add break points. my problem is that if i use a media query like min width 1000px it will trigger the standard 1080p desktop screen, but it will also trigger high resolution phones (iphone 15 has a width of 1179px). what is a better media query to use in that situation?

3 Comments

2024/03/29
13:29 UTC

why doesn't my shadow appear in join button. note {buton } is not a mistake.

</button><button class="join">

JOIN

</button><style> .join{ background-color: white; height: 40px; width: 75; border-color: rgb(150, 150, 255); color: rgb(150, 150, 255); border-radius: 2px; cursor: pointer; } .join:hover{ background-color:rgb(150, 150, 255) ; color: white; box-shadow: 2px,3px,10px rgb(180, 175, 175) ; } .join:active{ box-shadow: 2px,10px,10px rgb(180, 175, 175) ; } </style>

2 Comments

2024/03/29
06:48 UTC

Wisdom needed!

Hello there professional front-end developers! I hope you guys are doing good printing tons of money living a good life. I enrolled in this CSS Course in Udemy of Maximilian and Everything was fun until I reached to background images section and honestly this thing sucks!

So, I have a question for you all "do we really need these background image properties? like Background-size: background-position: background-origin: background-clip background-attachment: " also if you have any tips regarding background-images please share, do tell me what properties in this I should be really focusing on that are used in real world scenarios like what background image properties we used in real world scenarios.

Please share your views and answer, you few minutes spent during reading and answering this can really change my life.

Thankyou

2 Comments

2024/03/28
17:02 UTC

Skilled website designer needed for optimisation (mobile and tablet mostly)

Hi,

I am looking for a skilled/experienced website designer to help me finish off my website so that it looks good across all devices. I have created a good looking desktop website and have done alot of work on the mobile website so far.

I have designed it using Squarespace but with a fair amount of css coding.

Unfortunately, I cannot pay anyone for doing this. However, I would be happy to trade my skills/expertise as a music teacher/author/book formatter in return. I'd be happy to trade the number of hours it takes someone to finish my website in instrumental music lessons (guitar/bass/piano/drums) in return (e.g if it takes you 10 hours I can provide 10 hours of lessons or other skills).

I don't expect many to be interested in this but I look forward to hearing from those that are.
A portfolio/examples of your work is a MUST! I can offer you the same of my work.
Thanks!

1 Comment

2024/03/26
16:20 UTC

Image sizing in flexbox

Hello all,

how do I make an image to be the size of the container of the flexbox rather than the image default dimensions such that it shrink and increases as the container moves.

Thank you

2 Comments

2024/03/26
07:34 UTC

Css position

Do any of you know if any resources that can help css position a little better especially absolute and relative?

These two are really confusing but I see a lot of projects using these two positions.

Thank you

1 Comment

2024/03/26
07:33 UTC

Why is align-self property not working in flexbox?

I'm new in learning CSS and can't seem to understand why this align-self property isn't working. Check the code below:-

https://codepen.io/dividclass/pen/LYvLgMP

Note: I applied align-self on item 2.

4 Comments

2024/03/26
06:12 UTC

Practical tool to resolve CSS responsive layout challenges

This one is to streamline the process of creating Flexbox layouts: https://flexboxcss.com

Is there something similar for Grid layout?

0 Comments

2024/03/26
00:57 UTC

Grid using media queries to collapse buttons from 3 to 2 to 1

code: https://jsfiddle.net/cqr3wk1f/

The buttons are not collapsing from 3 to 2 to 1.

I don’t understand why it is not working.

How do I get it to work?

u/media (max-width: 569px) {
.buttonContainerB {
grid-template-columns: repeat(2, 183px);
}
}

u/media (max-width: 183px) {
.buttonContainerB {
grid-template-columns: repeat(1, 183px);
}
}

.buttonContainerB {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}

u/media (max-width: 569px) {
.buttonContainerC {
grid-template-columns: repeat(2, 183px);
}
}

u/media (max-width: 183px) {
.buttonContainerC {
grid-template-columns: repeat(1, 183px);
}
}

.buttonContainerC {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}

1 Comment

2024/03/25
19:08 UTC

Cargo site: hover image, how to make the image display over the text

Hello Everyone,

I'm using cargo site "hovering image function", I'm not sure how to make the image appear on top of the text. Could someone help me with it. joyzhang.work

Here's the current css code

[id="F2198190651"] .page-content {
padding-top: 0rem;
align-items: flex-start;
}.
[id="F2198190651"].page {
min-height: var(--viewport-height);
}
hover-title {
display: inline;
pointer-events: auto;
cursor: pointer;
}
.hover-image {
visibility: hidden;
}
body:not(.mobile) .hover-title:hover + .hover-image {
visibility: visible;
pointer-events: none;
}
.hover-image {
display: flex;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;
/* Change width and height to scale images */
width: 90vw;
height: 90vh;
}
.hover-image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
margin-bottom: 0;
}

1 Comment

2024/03/25
17:15 UTC

CSS Layout problem

Hey guys,

I seen a cool design online that i wanted to build as part of my learning for web development.

There is an element in the design that i have no idea how to make or what to even google to see if there are any other people who done this before it's the top left section with the blue box that has the main background bend around it.

Would anyone be able to give me some direction as to where i can start with this ? or have any idea how to build a layout like this?

Link to file

https://www.figma.com/file/YWCVPAxUrnf7O3db8Uicyd/Untitled?type=design&node-id=1%3A2&mode=design&t=sbZp42nyifmhMBU6-1

3 Comments

2024/03/25
09:42 UTC

[TUTORIAL] Adding chat widgets without modifying WordPress theme files

Hello everyone,
We have created a tutorial video that will go through step-by-step on how to install a chat widget to your WordPress website in literally minutes. https://css-javascript-toolbox.com/how-to/how-to-add-install-livechat-to-your-wordpress-website-in-minutes/

0 Comments

2024/03/24
11:47 UTC

Position sticky sidebar scrolls aways when bottom of page is reached.

Make your browser width is small so there are ony one or two note columns, then scroll the bottom, the sidebar with scroll at the very end and I dont want this to happen:

Live project: https://keeperplus.up.railway.app/Notes

I think the issue may be with the the height prop on the sidebar class being 100vh, and it is somehow causing some overflow, however I can make it any less otherwise the sidebar doesnt always reach to the bottom of the page.

Here is the file containing the jsx for sidebar:

https://github.com/Mezzichai/note-keep/blob/main/frontend/src/features/Labels/components/Sidebar.tsx

Here is the sidebar styles (the first class is the only relevant one):

https://github.com/Mezzichai/note-keep/blob/main/frontend/src/features/Labels/styles/sidebarStyles.module.css

Here are the parent containers styles:

https://github.com/Mezzichai/note-keep/blob/main/frontend/src/App.css

3 Comments

2024/03/21
22:36 UTC

Can I avoid repetition with a media query or pseudo selector?

I was trying to build some sort of light/dark theme toggle with CSS only (strategy basically copied from https://endtimes.dev/no-javascript-dark-mode-toggle/ but trying to use the :has pseudo-selector to avoid the additional div hack) and I'm pretty happy with most of it but there's still a weird repetition that I'd like to remove if possible.

This is my current code:

@media (prefers-color-scheme: light) {
    :root {
        --hc-color: #35353F;
        --color: #454545;                   /* A little less contrast */
        --lc-color: #454545C4;              /* A little less contrast */
        --background-color: #EEEEEE;        /* A little less contrast */

        --hyperlink-color: #0077AA;         /* Links don't need to be that egregious blue */
        --hyperlink-visited-color: #941352; /* Let's keep the links theme more in line */

        --accent-color: #e82c8e;
    }
}

:has(#color-mode-light:checked) {
    --hc-color: #35353F;
    --color: #454545;                   /* A little less contrast */
    --lc-color: #454545C4;              /* A little less contrast */
    --background-color: #EEEEEE;        /* A little less contrast */

    --hyperlink-color: #0077AA;         /* Links don't need to be that egregious blue */
    --hyperlink-visited-color: #941352; /* Let's keep the links theme more in line */

    --accent-color: #e82c8e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hc-color: #FDFDFD;
        --color: #E0E0E0;
        --lc-color: #E0E0E0E0;
        /*
        Background color has a little of blue tint
        */
        --hc-background-color: #111115;
        --background-color: #1B1B1F;

        --hyperlink-color: #8ab4f8;
        --hyperlink-visited-color: #c58af9;

        --accent-color: #e82c8e;
    }
}

:has(#color-mode-dark:checked) {
    --hc-color: #FDFDFD;
    --color: #E0E0E0;
    --lc-color: #E0E0E0E0;
    /*
    Background color has a little of blue tint
    */
    --hc-background-color: #111115;
    --background-color: #1B1B1F;

    --hyperlink-color: #8ab4f8;
    --hyperlink-visited-color: #c58af9;

    --accent-color: #e82c8e;
}

I don't think the HTML has much relevance but basically I've a form with a radio button for "OS", "Light" and "Dark".

As you can see, I've the colors for each theme repeated twice which I'd love to avoid. Intuitively as someone with barely any CSS knowledge I'd say either via some sort of "grouping of variables" (which from my search impossible unless you're reusing them for the shorthand syntax), or with a complex selector like (pseudo code):

@media (prefers-color-scheme: dark),
:has(#color-mode-dark:checked) {
  ...
}

There's the option to declare all the variables and then just reference them but that would only avoid repetition of the color itself, but would result in even more "boilerplate"/code.

My question is, is this possible? Am I thinking completely wrong about this and the design is fundamentally flawed?

Additionally, bonus question since I'm unsure if I'm tapping into almost undefined behavior or not, the following part: :has(#color-mode-dark:checked). I started by using body:has(#color-mode-dark:checked), then saw I could actually use :root:has(#color-mode-dark:checked) and could even shorten it to the current one (at least working on my browser - latest firefox), is this even correct?

Edit: Format and credit

2 Comments

2024/03/21
14:45 UTC

Top Menu Bar (ie Hot, New, Rising, etc) overlaps on posts in some resolutions.

On https://old.reddit.com/r/aiyu/ there are certain resolutions where the bar will overlap the post such as this :

https://imgur.com/1WI8ZMX

I'm on 1440p and never noticed the issue but recently it was brought to my attention. I've been trying to fix it in the CSS but none of my solutions seem to work. Any help is appreciated.

1 Comment

2024/03/21
09:07 UTC

Guides

Posting Guidelines

Related Subreddits

Related Resources

SUBMIT A CSS QUERY

18,341 Subscribers

How to add <h1> tag without break the site layout?

New to CSS I have no idea what I’m doing.

Please can someone check my CSS code. I am trying to create a colouring in book as a project. I am a complete novice, I am unsure about webkit appearance and is there something else i could use? I am unsure if div and i tag are correct. I appreciate all the help I can get, thank you.

Can anyone help me fix my animation?

Looking for a CSS Study Buddy (2025 Attempt!)

Media Query not working

Figma to CSS

Am I cooked

how do I modify the reddit button with a stylus css script

Apply Any Squarespace CSS to Mobile Only

Why isn’t floating sleeve Appear?

Media query help

Recreating Spotify equalizer inside a jsfiddle

Shrink text with parent div

CSS animation doesn't play.

Css media query problem

why doesn't my shadow appear in join button. note {buton } is not a mistake.

Wisdom needed!

Skilled website designer needed for optimisation (mobile and tablet mostly)

Image sizing in flexbox

Css position

Why is align-self property not working in flexbox?

Practical tool to resolve CSS responsive layout challenges

Grid using media queries to collapse buttons from 3 to 2 to 1

Cargo site: hover image, how to make the image display over the text

CSS Layout problem

[TUTORIAL] Adding chat widgets without modifying WordPress theme files

Position sticky sidebar scrolls aways when bottom of page is reached.

Can I avoid repetition with a media query or pseudo selector?

Top Menu Bar (ie Hot, New, Rising, etc) overlaps on posts in some resolutions.