Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

CSS Customization Question, margin and margin-right property does not function as expected

A topic by BirdWorks created Nov 22, 2021 Views: 378 Replies: 6
Viewing posts 1 to 2
(7 edits)

Hello! Thank you for your time.

With CSS customization activated, I have been trying my hand at customizing my new game's itch.io page (click here for link). As is visible on the page, the leftmost column has "sticky notes" with text. For visual appeal, I am trying to have these "sticky notes" offset from either the left or right side of the column in an alternating pattern. Below is a picture of what I intend to do:


I am trying to do this by having CSS code with margin-left & margin-right customizations.  Below is a truncated example of the CSS that is being used for this shift:

.custom-note-left{
 margin-left: 10%;
 display: block;
 border: solid 20px;
 border-image-source: url(https://img.itch.zone/aW1nLzc0MzUwNTkucG5n/original/0%2F2VmA.png);
 border-image-slice: 20 40 20 40;
 border-image-width: 1 2;
 border-image-outset: 1;
 border-image-repeat: round;
 background: #d4bba4;
 color: #8a6f30;
 width:62.5%;
 max-width:350px;
 }
.custom-note-right{
 margin-right: 10% !important;
 display: block;
 border: solid 20px;
 border-image-source: url(https://img.itch.zone/aW1nLzc0MzUwNTkucG5n/original/0%2F2VmA.png);
 border-image-slice: 20 40 20 40;
 border-image-width: 1 2;
 border-image-outset: 1;
 border-image-repeat: round;
 background: #d4bba4;
 color: #8a6f30;
 width:62.5%;
 max-width:350px;
 }
.custom-large-font{
 margin: 0 0 10px 0 !important;
 font-size: 30px;
 text-align: center !important;
 text-decoration: underline;
 }
.custom-medium-font {
 margin: auto !important;
 font-size: 20px;
 text-align: center !important;
 max-width:250px !important;
 }
//skipping some code
<div class="custom-note-right">
<p class="custom-large-font">
Piracy in Motion
</p>
<p class="custom-medium-font">
Download your pirate to be used in a future Birdworks project! 
</p>
</div>

The issue that I am encountering is that the margin-right css detail does not seem to operate as I expect. 

Using margin-left properly shifts the displayed code snippet off of the left wall. Using margin-right only sets the displayed code snippet exactly against the column's left edge. I suspect that there is something in how itch.io sets up the default page that is preventing me from properly utilizing the margin-right field.

 Any insight on this issue would be appreciated.

Admin (1 edit) (+1)

margin doesn’t work how you think it does, it adds an invisible gap outside the containing box of the element. It does not stick an element to a side. You can use margin-left: auto to create a margin on the that automatically fills the remaining space though, then apply margin right to offset it from the right.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Hope that helps

Hey Leafo uhh..

jordan - itch.io He's being toxic uhh how do i stop him

That does help! Your solution is exactly what I needed. I never considered using auto in conjunction with a set value.

Thank you again for the incredibly quick insight!

Leafo Ethan is leaking my mod without my permission what do I do I gave him the files and he's leaking the mod just cuz I told him to shut up cuz he be saying to kiss someone.

VS MII by Ethan[Not Working On Vs Ethan] (itch.io)

Hey Leafo one of your itch.io members is being racist to me I have proof this is just messed up. Please ban him.

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.