Modding on the Spectrum

@media screen and (max-width: 1100px) {
  .bbgallery {
    grid-template-columns: 404px!important;
  }
}

@media screen and (max-width: 465px) {
  .bbgallery {
    display:block!important;
  }
}

I fixed the appearance of the gallery on mobile devices. The two column layout will be shown if the screen width of your device is greater than 1100 pixels.


Here's the CSS code snippet regarding the layout for different screen sizes:

[code]@media screen and (max-width: 1100px) {
.bbgallery {
grid-template-columns: 404px!important;
}
}

@media screen and (max-width: 465px) {
.bbgallery {
display:block!important;
}
}[/code]


Further reading:
[url=https://www.w3schools.com/cssref/css3_pr_mediaquery.php]CSS @media rule[/url]
[url=https://www.w3schools.com/cssref/pr_class_display.php]CSS display property[/url]
[url=https://www.w3schools.com/css/css_important.asp]CSS !important Property[/url]
[url=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout]Grid layout[/url]

[gallery][attachment=0]your_image.jpg[/attachment]...[/gallery]

[gallery2=center][attachment=0]your_image.jpg[/attachment]...[/gallery2]

[align=center]text[/align]

[size=125]Gallery BBCode[/size]

Attached images can be shown side by side using the gallery or gallery2 BBCodes. The two column layout of the gallery will be shown if the screen width of your device is greater than 1100 pixels.

[code][gallery][attachment=0]your_image.jpg[/attachment]...[/gallery][/code]
(works with IMG BBCode as well)

Example:
[gallery][attachment=0]287627-1627691041.jpg[/attachment][attachment=1]287627-1614471629.jpg[/attachment][attachment=2]287627-1635896827.jpg[/attachment][attachment=3]287627-1633832956.jpg[/attachment][/gallery]
(shown are my Fallout 4 characters Sam (the one with the grey skin) and Charly)


Positioning of the gallery is possible using the gallery2 BBCode.

[code][gallery2=center][attachment=0]your_image.jpg[/attachment]...[/gallery2][/code]
All options: left, right, center




[size=125]Text alignment BBCode[/size]

You can align the text with the align BBCode.

[code][align=center]text[/align][/code]
All options: left, right, center, justify

Example (CSS style: "text-align: center"):
[align=center]Text


Combined with gallery2 (CSS style: "justify-content: center"):[/align]



[gallery2=center][attachment=0]287627-1627691041.jpg[/attachment][attachment=1]287627-1614471629.jpg[/attachment][attachment=2]287627-1635896827.jpg[/attachment][attachment=3]287627-1633832956.jpg[/attachment][/gallery2]