Resource Div Box Chart!

[deer]

Fable Oh my gosh! Thank you so much! That helps a lot!

Nano Thank you so much!

 

[Fable]

Fable Oh my gosh! Thank you so much! That helps a lot!

Nano Thank you so much!

No problem. I messed around with trying to make flex designs on CSS/HTML and it sorta worked, but not in a visually pleasing way as it scaled things pretty oddly. However, if you are curious; https://www.w3schools.com/css/css_rwd_viewport.asp

That is basically what creates responsive designs. However, we cannot use a meta tag.

 

[fluticasone]

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.

 

[MISTER UN. 0W3N]

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

 

[MISTER UN. 0W3N]

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!

 

[wonderandawe]

You should add border-radius to your chart.

Hello world this is a test.

Hello world this is a test.

[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]

 

[Nano]

You should add border-radius to your chart.

Hello world this is a test.

Hello world this is a test.

[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).

 

[Fable]

You should add border-radius to your chart.

They do have it on the chart. You can use the find in page to see that.

 

[Fable]

Nano ninja-ed me, this is why I am the Pirate Queen.

 

[wonderandawe]

Doh! I must have missed it.

Sorry.

 

[Nano]

Nano ninja-ed me, this is why I am the Pirate Queen.

Guess you weren't Fast and Fyurious enough. uvu

 

[NoviceOfRoleplay]

Anyone know how to have the image scroll with the screen?

 

[MISTER UN. 0W3N]

Image scroll with the screen? Like a background image or the [img] [/img] tags?

 

[IctoraPost]

Anyone know how to have the image scroll with the screen?

That's the fixed property, under the background section.

.

[div=background: url(https://static.comicvine.com/uploads/original/11113/111134695/3891161-6868490335-cats-.jpg) fixed;].[/div]

 

[Donder172]

No problem. I messed around with trying to make flex designs on CSS/HTML and it sorta worked, but not in a visually pleasing way as it scaled things pretty oddly. However, if you are curious; https://www.w3schools.com/css/css_rwd_viewport.asp

That is basically what creates responsive designs. However, we cannot use a meta tag.

What about the @media tag?
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

 

[fluticasone]

What about the @media tag?
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

I'd say no. We're essentially using div inline styling, so setting CSS tags like that won't work.

 

[Fable]

What about the @media tag?
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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.

 

[Donder172]

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?

 

[Nano]

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.

 

[Donder172]

Again, you need CSS for that and RPN only allows inline, so that won't work.

Well that's a disappointment...

 

[E v a n e s c e n t]

d00ds

dis literally saved my lyfu