Bbcode Infoboxes

Development
6

Okay have manage to test support for 2 columns. The code is still pretty basic/primitive.

The code ATM only has float options for Redbox.

// Testing float

div[data-wrap="redboxfl"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
//*
      float: left;
      margin-right: 0.10em;
      width: 45.5% !important;
//*
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: left;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="redboxfr"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
//* 
      float: right;
      margin-left: 0.10em;
      width: 45.5% !important;
//*
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: right;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}

Still need to add other color options.

How to use in Post

[wrap="redboxfl"]
# Infobox float

Testing float
[/Wrap]

[wrap="redboxfr"]
# Infobox float

Testing float
[/Wrap]
>
Text after
  • Note: The “>” is required between rows at least with text below. Alternatively you could put the text below beside the “> Text” similar to how I used it for the Infobox title.
Screenshot Mobile

The image is a screenshot of a mobile application, showing a dropdown menu with four options related to floating elements in a digital context. (Captioned by AI)
The image is a screenshot of a mobile application, showing a dropdown menu with four options related to floating elements in a digital context. (Captioned by AI)864×1544 170 KB

@merefield could I add something to each current code in Op something like

&[data-float="left"]{
      float: left;
      margin-left: 0.25em !important;
      width: 44.5% !important;
}
&[data-float="right"]{
      float: right;
      margin-right: 0.25em !important;
      width: 44.5% !important;
}

To have option to use in post like? Confirmed works!

[wrap="redbox" float="left"]
# Infobox float

Testing float
[/Wrap]
Screenshot Mobile

This image displays a screenshot of a mobile device with a list of differently named floating elements. (Captioned by AI)
This image displays a screenshot of a mobile device with a list of differently named floating elements. (Captioned by AI)862×1222 120 KB

The first set is just using float left 3 of them auto wraps!

Think it I add the code mobile at 44.5% width. Then make desktop support 3 columns maybe with width set to 25% width?

Or if you have a better solution to allow 2 columns in mobile with 3 or 4 on desktop. Though would need to have width adjust according to number of columns and move additional columns to next line if mobile.

Maybe use something like grid from image or code from masonry image?