What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed manipulating accordions (issue resolved)

VALEN T.

𝖈 𝔬𝔫 𝔟𝔬𝔱𝔥 𝔰𝔦𝔡𝔢𝔰 𝔩𝔦𝔨𝔢 𝖈𝖍𝖆𝖓𝖊𝖑
so idk if i'm doing wrong or this is another bug/accordions are just finicky, but i tried manipulating accordions and their alignment (margin/position-values) keep changing when i switch bw dark and light mode. take for example this code of mine that i edited in the light mode just now but the issue's still there when i switch to dark mode:
MOOD: Donec posuere nisl tortor

OUTFIT: Donec aliquam vestibulum ex

LOCATION: Vivamus quis aliquet est
two
INTERACTIONS: Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum

MENTIONS: Donec cursus justo eu aliquet venenatis. Integer consequat
two
TL;DR: Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis
two
asiya
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.

Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.

Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.
it may be quite simple but now that it's done
I hope you don't mind
That I put down in words
How wonderful life is while you're in the world
code by fudgecakez
Code:
[border= /*container*/ 0; box-sizing: border-box; padding: 0; display: flex; position: relative; margin: auto; height: 460px; max-width: 500px; overflow: hidden;][border= /*left*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 2; position: relative; overflow: hidden;][border= /*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131px; width: 100%; position: relative; overflow: hidden; margin: -16px 0 0 0; z-index: 6;][accordion=100%]{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 115px; background: #957161; position: relative; margin: -6px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "MOOD" + "OUTFIT" + "LOCATION" DETAILS-------------
------aka the first accordion------
------btw you can distribute these little rp details (mood, mentions, tags, etc) however you like------



[/COMMENT][b]MOOD:[/b] Donec posuere nisl tortor

[b]OUTFIT:[/b] Donec aliquam vestibulum ex

[b]LOCATION:[/b] Vivamus quis aliquet est[/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE FIRST PICTURE-------------



[/COMMENT][border=/*PIC 1*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 115px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/4f3cf242add10423885700b0dad97f8a/c05d4efdddf9c80b-0f/s1280x1920/14c02ad385862f4ee1efc2eacba18b9dafc1dd27.jpg) 50% 50%; background-size: cover; top: -122px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=


/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131px; width: 100%; position: relative; overflow: hidden; margin: -16px 0 0 0; z-index: 5;][accordion=100%]
{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 115px; background: #86827B; position: relative; margin: -6px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "INTERACTIONS" + "MENTIONS" DETAILS-------------
------aka the second accordion------



[/COMMENT][b]INTERACTIONS:[/b] Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum

[b]MENTIONS:[/b] Donec cursus justo eu aliquet venenatis. Integer consequat[/border][/border][/border]}[border= /*slide*/ 0; box-sizing: border-box; padding: 0; width: 100%; height: 115px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE SECOND PICTURE-------------



[/COMMENT][border= /*PIC 2*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 115px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/452e3a9f14d69b7a96f67ff6aea3afd0/c05d4efdddf9c80b-1f/s1280x1920/4b75b0513df9f5cb01698ec4759b8af847096a57.jpg) 50% 20%; background-size: cover; top: -122px; left: -1px;][/border]}two{/slide}
[/accordion][/border][border=


/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131px; width: 100%; position: relative; overflow: hidden; margin: -16px 0 0 0; z-index: 4;][accordion=100%]
{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 115px; background: #96999A; position: relative; margin: -6px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "TAGS" DETAILS-------------
------aka the third accordion------



[/COMMENT][b]TAGS:[/b] 
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER]
[USER=68743]@fudgecakez[/USER][/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE THIRD PICTURE-------------



[/COMMENT][border=/*PIC 3*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 115px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/d2300dfcf025e63946412de33d7c3ae5/c05d4efdddf9c80b-bc/s1280x1920/f587f78ad26233d461d754ec75444cac785594da.jpg) 50% 50%; background-size: cover; top: -122px; left: -1px;][/border]}two{/slide}[/accordion][/border][border=


/*accordion holder*/ 0; box-sizing: border-box; padding: 0; height: 131px; width: 100%; position: relative; overflow: hidden; margin: -16px 0 0 0; z-index: 3;][accordion=100%]
{slide=[border= /*text container*/ 0; box-sizing: border-box; padding: 10px 0 10px 0; width: calc(100% + 15px); height: 115px; background: #998674; position: relative; margin: -6px 0 0 -7px; overflow: hidden;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0; width: 200%; overflow: auto; height: 100%;][border= /*text*/ 0; box-sizing: border-box; padding: 0 10px 0 10px; width: 50%; font-size: 10px; font-weight: normal; text-align: left; font-variant: none; line-height: 14px; color: white;][COMMENT]



-------------THIS IS WHERE I ADDED THE "POST TLDR" DETAILS-------------
------aka the fourth and final accordion------



[/COMMENT][b][plain]TL;DR:[/plain][/b] Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis[/border][/border][/border]}[border=0; box-sizing: border-box; padding: 0; width: 100%; height: 115px; background: pink; position: relative;][/border]{/slide}{slide=[COMMENT]



-------------THIS IS WHERE YOU ADD THE FOURTH AND FINAL PICTURE-------------



[/COMMENT][border=/*PIC 4*/ 0; box-sizing: border-box; padding: 0; pointer-events: none; position: absolute; height: 115px; width: calc(100% + 3px); background: url(https://64.media.tumblr.com/db7e40c405ca81346d930f35e8feb8ad/c05d4efdddf9c80b-ab/s1280x1920/c829119e49ee9b7c0224d633f3a4b573fee4daef.jpg) 50% 50%; background-size: cover; top: -122px; left: -1px;][/border]}two{/slide}
[/accordion][/border][/border][border=


/*right*/ 0; box-sizing: border-box; padding: 0; height: 100%; flex: 5; overflow: hidden;][border= /*flex*/ 0; box-sizing: border-box; padding: 0; height: 100%; width: 100%; position: relative; display: flex; flex-direction: column;][COMMENT]



-------------THIS IS WHERE YOU ADD YC'S NAME-------------



[/COMMENT][border= /*NAME*/ 0; box-sizing: border-box; padding: 0 10px 1px 10px; width: 100%; background: #5A493C; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 26px; color: white; font-style: oblique; line-height: 26px; position: relative; margin-bottom: 10px;]asiya[/border][border=


/*text*/ 0; box-sizing: border-box; padding: 0; width: 200%; position: relative; flex: 1; overflow: auto;][border= /*hidden scroll*/ 0; box-sizing: border-box; padding: 0 0 0 10px; width: 50%; position: relative; text-align: justify; font-size: 11px; line-height: 15px;][COMMENT]



-------------THIS IS WHERE YOU CAN TYPING IN YOUR POST FROM-------------



[/COMMENT]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere nisl tortor. Donec aliquam vestibulum ex. Vivamus quis aliquet est. Aliquam erat volutpat. Quisque malesuada nunc vel convallis vestibulum. Donec cursus justo eu aliquet venenatis. Integer consequat, est sit amet dignissim tristique, tortor ipsum pretium lorem, non ornare justo nisi id mauris. Vestibulum ut dapibus leo. Aliquam tempor et orci a posuere. Morbi vel pretium turpis. Curabitur egestas ipsum non augue maximus congue.

Morbi elit mauris, fringilla at aliquam et, semper ut turpis. In sit amet vehicula nisl. Maecenas magna turpis, luctus non malesuada ut, tristique eu turpis. Nulla malesuada et sem vitae euismod. Duis pharetra odio a tortor posuere laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse consectetur lorem quis mauris dignissim, quis tristique nisi mollis. Vivamus efficitur lorem ut massa gravida consectetur. Quisque mattis maximus luctus. Proin fermentum ligula bibendum velit volutpat, sed dapibus mi iaculis. In dictum varius ullamcorper. Sed tristique sit amet dui ac faucibus.

Proin ut nisi sed felis dictum tincidunt id consectetur sem. Sed sit amet mi euismod, dignissim nibh id, faucibus ex. Quisque sit amet condimentum sapien. Sed nisl sapien, cursus et odio id, tristique scelerisque lacus. Nullam in dapibus sapien. Sed odio erat, faucibus et accumsan ut, varius in sem. Cras vitae nibh id elit vestibulum congue vitae eu diam. Donec volutpat odio eget dolor semper, lacinia vehicula lectus ullamcorper. Proin sodales velit lorem, ac consectetur diam suscipit sit amet. Maecenas pharetra blandit lectus, quis interdum odio consequat id. Praesent maximus mattis justo ut imperdiet. Ut finibus posuere euismod. Fusce et felis eu lectus pretium vestibulum. Cras luctus augue non diam dignissim sollicitudin. Donec tristique diam metus. Nullam egestas quis leo nec laoreet.[/border][/border][COMMENT]



-------------THIS IS WHERE YOU ADD THE QUOTE/LYRIC-------------



[/COMMENT][border= /*QUOTE*/ 0; box-sizing: border-box; padding: 10px; width: 100%; height: 115px; background: #5A493C; position: relative; margin-top: 10px; font-weight: bold; color: white; text-transform: uppercase; text-align: right; display: flex; justify-content: flex-end; align-items: center; font-style: oblique; font-size: 14px; line-height: 14px;]it may be quite simple but now that it's done
I hope you don't mind
That I put down in words
How wonderful life is while you're in the world[/border][/border][/border][/border][border=


/*credit*/ 0; box-sizing: border-box; padding: 1px 0 0 0; max-width: 500px; margin: auto; position: relative; display: flex;][border=0; box-sizing: border-box; padding: 0; flex: 2;][/border][border=0; box-sizing: border-box; padding: 0; flex: 5; font-size: 7px; line-height: 11px; text-align: center;][url=https://www.rpnation.com/threads/the-dark-ages-mobile-friendly.471463/page-2#post-10452145]code[/url] by fudgecakez[/border][/border]
i just don't get why it's happening ):
 

Alteras

The Sleepy One
Moderator
Supporter
It is due to sub-pixel rendering. This happens alot when the code is trying to jank too many things. You can fix this by tacking on something like .75px to your heights.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top