Accepting Requests BBCode Responsive Grid Hack

[TurtleBay]

[class=container_fluid] box-sizing: border-box; min-width: 20rem; width: 100%; min-height: 70vh; margin: 0; padding: 0; display: flex; flex-flow: column wrap; color: white; [/class] [class=container] box-sizing: border-box; min-width: 20rem; max-width: 980px; width: 80%; min-height: 70vh; margin: 0 auto; padding: 0; display: flex; flex-flow: column wrap; color: white; [/class] [class=row] box-sizing: border-box; display: flex; flex: 1 0 100%; flex-flow: row wrap; [/class] [class=col] box-sizing: border-box; flex: 1 0 auto; padding: 0.8rem 0.5rem; [/class] [class=1] width: 8.33333333%; [/class] [class=2] width: 16.66666667%; [/class] [class=3] width: 25%; [/class] [class=4] width: 33.33333333%; [/class] [class=5] width: 41.66666667%; [/class] [class=6] width: 50%; [/class] [class=7] width: 58.33333333%; [/class] [class=8] width: 66.66666667%; [/class] [class=9] width: 75%; [/class] [class=10] width: 83.33333333%; [/class] [class=11] width: 91.66666667%; [/class] [class=12] width: 100%; [/class] [class=offset_0] margin-left: 0; [/class] [class=offset_1] margin-left: 8.33333333%; [/class] [class=offset_2] margin-left: 16.66666667%; [/class] [class=offset_3] margin-left: 25%; [/class] [class=offset_4] margin-left: 33.33333333%; [/class] [class=offset_5] margin-left: 41.66666667%; [/class] [class=offset_6] margin-left: 50%; [/class] [class=offset_7] margin-left: 58.33333333%; [/class] [class=offset_8] margin-left: 66.66666667%; [/class] [class=offset_9] margin-left: 75%; [/class] [class=offset_10] margin-left: 83.33333333%; [/class] [class=offset_11] margin-left: 91.66666667%; [/class] [class=start] -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: start; [/class] [class=center] -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; [/class] [class=end] -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: end; [/class] [class=top] -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; [/class] [class=middle] -webkit-box-align: center; -ms-flex-align: center; align-items: center; [/class] [class=bottom] -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; [/class] [class=around] -ms-flex-pack: distribute; justify-content: space-around; [/class] [class=between] -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; [/class] [class=first] -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; [/class] [class=last] -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; [/class] [class=xs] min-width: 20rem; [/class] [class=h1] font-size: 2.5rem; [/class] [class=h2] font-size: 1.8rem; border-bottom: 1px solid; margin-bottom: .5em; [/class] [class=p] padding: .3em 0; text-indent: 2em; text-align: justify; [/class] [class=img_responsive] width: 80%; margin: 0 auto; [/class] [class=red] background-color: red; [/class] [class=blue] background-color: blue; [/class] [class=green] background-color: green; [/class] [class=orange] background-color: orange; [/class] [class=pink] background-color: pink; [/class] [div class=container] [div class="row red"] [div class="col 1 blue"] [div class=h1]col 1[/div] [/div] [div class="col 1 green"] [div class=h1]col 1[/div] [/div] [div class="col 1 orange"] [div class=h1]col 1[/div] [/div] [div class="col 1 pink"] [div class=h1]col 1[/div] [/div] [div class="col 1 blue"] [div class=h1]col 1[/div] [/div] [div class="col 1 green"] [div class=h1]col 1[/div] [/div] [div class="col 1 orange"] [div class=h1]col 1[/div] [/div] [div class="col 1 pink"] [div class=h1]col 1[/div] [/div] [div class="col 1 blue"] [div class=h1]col 1[/div] [/div] [div class="col 1 green"] [div class=h1]col 1[/div] [/div] [div class="col 1 orange"] [div class=h1]col 1[/div] [/div] [div class="col 1 pink"] [div class=h1]col 1[/div] [/div] [div class="col 2 red"] [div class=h1]col 2[/div] [/div] [div class="col 3 pink"] [div class=h1]col 3[/div] [/div] [div class="col 7 orange"] [div class=h1]col 7[/div] [/div] [div class="col 1 blue xs"] [div class=h1]col 1 xs[/div] [/div] [div class="col 1 green"] [div class=h1]col 1[/div] [/div] [div class="col 1 blue"] [div class=h1]col 1[/div] [/div] [div class="col 1 green"] [div class=h1]col 1[/div] [/div] [div class="col 1 blue xs"] [div class=h1]col 1 xs[/div] [/div] [div class="col 3 red"] [div class=h1]col 3[/div] [/div] [div class="col 2 blue"] [div class=h1]col 2[/div] [/div] [div class="col 2 green"] [div class=h1]col 2[/div] [/div] [div class="col 6 red"] [div class=h1]col 6[/div] [/div] [div class="col 6 blue"] [div class=h1]col 6[/div] [div class=img_responsive]

[/div] [/div] [div class="col 6 green"] [div class=h1] col 12 [/div] [div class=h2] BBCode Responsive grid hack v.1 [/div] [div class=p] Currently, it cannot resize automatically with current BBCode limitations. Using this current method, you have to specify a mobile breakpoint, which cannot be removed automatically, as you can see the issue with the xs breakpoint class. There is a way to do this with script functionality in BBCode+ by adding a button for viewers to select mobile vs desktop view, but that’d be annoying, at least to me. [/div] [div class=p] I do have a responsive image style div with which if you wrap a BBCode img tag, it’ll resize automatically. [/div] [div class=p] I’m not sure if I’m going to release this code because it doesn’t function necessarily 100% how I’d like for it to behave. At the same time, I don’t have the time to write up a long documentation or support people who want to use this code... plus... I don’t think anyone wants to use so many lines of css they may not need before the content... given that, I’m willing to take some requests... I don’t know how many yet... [/div] [div class=h2] In the works [/div] [div class=p] Stuff and things... not sure what more can be done... [/div] [div class=h2] Requests [/div] [div class=p] Feel free to request me to make your template mobile friendly. I may or may not accept your request depending on my free time. I will also need some time, possibly a lot of time because I don’t have free time to go around so freely. DO NOT RUSH ME and DO NOT KEEP ASKING ME IF I’M WORKING ON SOMETHING. I will ignore those messages and probably will decide to stop working on it. lol [/div] [div class=p] I can help make your template mobile friendly, but don’t ask me to keep tweaking your template after I’ve given you the code... you can tweak it on your own. [/div] [div class=p] I will only work with code you provide. I will not add any new functionalities or items or designs. I’m only going to rework codes provided. I will also not create BBCode versions of HTML templates. [/div] [div class=p] If you haven’t read this before requesting, I will not respond to your post. And please send requests on PM titled mobile friendly help request. [/div] [div class=p] Any attribution to me if I’ve worked on your template will be appreciated. [/div] [div class=h2] Resources [/div] [div class=p] For those of you who may have questions about terminology and or code for BBCode, please refer to the BBCode tutorial threads on RPNation. For others who have questions concerning CSS or HTML or JavaScript, please google them. There are plenty of amazing people with more desire to spread the knowledge out there who have done amazing job explaining it. For one, go check out W3School. It’s a great place to learn. [/div] [/div] [/div] [/div]

 

[Alteras]

Hey TurtleBay

You might want to change your container width to 100%. the 80vw doesn't translate well for many screens, since the max-width of a post is about 1600px. It would probably help with the responsiveness.

 

[TurtleBay]

Hey TurtleBay

You might want to change your container width to 100%. the 80vw doesn't translate well for many screens, since the max-width of a post is about 1600px. It would probably help with the responsiveness.

Actually, I have 2 separate ones. Container and container fluid. Container fluid is 100vw and container is set to 80vw. So I have considered both, I just decided to go with latter.

 

[Alteras]

Actually, I have 2 separate ones. Container and container fluid. Container fluid is 100vw and container is set to 80vw. So I have considered both, I just decided to go with latter.

Errr, I'm slightly confused. 100vw isn't the same as 100%.

 

[TurtleBay]

Errr, I'm slightly confused. 100vw isn't the same as 100%.

Oh sorry, I misunderstood what was going on. I forgot to change it after I was testing stuff. I forgot to check the code on desktop browser. Thanks for the catch.