• 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.

Resource Div Box Chart!

deer deer
as a general rule of thumb, you'll want to use a combination of flex width (setting min, max and width %) and display-inline when you want to cross-device compatibility. it's not perfect, but it's the method I've been using and it works out fairly well.

Display-inline essentially puts the div boxes on the same line but if the viewing area is too small, it shoves the second div underneath the first and so on. You can use this to your advantage by setting the divs at the same min-width, but setting different width percentages. That way, when someone views it on a large screen, the width adjusts to accommodate the percentages you set. But if they go on a mobile device, if you set something at width: 20% with a 300px min-width for example, it won't get stupidly squished because you set a min-width.

Generally, you'll want your width values to be percentages, and min-widths to be a maximum of 325px if I'm not mistaken.
 
Thanks to everyone putting up new coding and advice so far! Sorry for not updating the chart yet. I've been battling a cold for a few weeks, and it's taken a turn on my end. x3x;;; Not saying I'm dying. Just went from sinus and chest congestion to ear infection.... uuuuuuuuuuuuuuuuuugh....
 
And... I think things are updated for the most part. Thanks again for all the help! I decided to just add things at the bottom instead of trying to get them at proper places that makes sense on the chart... aka lazy mode. Sorry about that!
 
You should add border-radius to your chart.


Hello world this is a test.

Hello world this is a test.


Code:
[RIGHT][div=background-color:#B5E655; border-radius: 20px; padding:20px; width:60%;]Hello world this is a test.[/div][/RIGHT]

[div=background-color:#4BB5C1; border-radius: 20px; padding:20px; width:60%;]Hello world this is a test.[/div]
 
You should add border-radius to your chart.


Hello world this is a test.

Hello world this is a test.


Code:
[RIGHT][div=background-color:#B5E655; border-radius: 20px; padding:20px; width:60%;]Hello world this is a test.[/div][/RIGHT]

[div=background-color:#4BB5C1; border-radius: 20px; padding:20px; width:60%;]Hello world this is a test.[/div]
Border-radius is already included in the chart (below border).
 
Nano Nano ninja-ed me, this is why I am the Pirate Queen.
 
Nope. Basically, if it isn't really basic CSS (background-color, color, font-size, transform) it won't work. Only the content that is contained within a div style works. You might be able to use viewport units though. But that obviously comes with its own set if problems.
I have the feeling quite some I am thinking to maybe use will not work. Will pseudo elements work? Like :hover, :nth-child etc?
 
I have the feeling quite some I am thinking to maybe use will not work. Will pseudo elements work? Like :hover, :nth-child etc?
Again, you need CSS for that and RPN only allows inline, so that won't work.
 

Users who are viewing this thread

Back
Top