Help Struggling with Mobile Friendly

[kaninchen]

Yup, it's me again It's a little embarassing I'm asking for help again but I am persistent! I have been tinkering around with this for a while (trial and error with flex, etc. but nothing I change fixes it) but can't figure out what I'm doing wrong. This is what it looks like on my phone:
I think I know the problem but I can't figure out how to fix it. The picture is eating the box? It doesn't cut off on the side but I want it to stay a horizontal rectangle and scale like that on mobile. I know the more readibility friendly option would be to have the photo come to the top, and the rest to stack below. But for right now I just want to figure this out. If it's not possible that's okay.

Here is the code (I know it's probably scuffed I'm just experimenting):

Spoiler

[bg=0; margin:auto; padding:0; width:100%; height:100%; height:400px; max-width:700px; background:aliceblue; display:flex; flex-flow: row nowrap;][bg=0; padding:0; width:100%; height:400px; min-width:280px; flex:2; background: URL('https://64.media.tumblr.com/6de6bef60f750bea0ea4a281a3b425b8/503f02364c4d50f3-f5/s640x960/66b2b07cc9124c0761ff1e97d584012d332f0ac6.jpg') 50% 100%; background-size:cover; -webkit-filter: saturate(1.5);][bg=0; padding:0; height:400px; width:100%; width:280px; background: URL('https://i.pinimg.com/originals/88/aa/5e/88aa5e8923e929221c43f676997302e8.png') 50% 100%; background-size:cover; -webkit-filter: saturate(1.5)][/bg] [/bg][/bg]

I also have another general question; how can you seperate your individual border tags, elements, etc. in line (like with a enter space between?) without them moving in the code? When I try it, that element shifts down. Is that possible? I only ask because I want to make it easier to spot stuff. Thanks in advance

 

[Uxie]

don't be embarrassed!! i asked so many questions when i first started out too (*^.^*) also choerry is very cute!
your code is actually mostly fine! three reasons why it's not working:

1. bg tags don't work with flexboxes! use [border=][/border] instead! replace all of the [bg=][/bg] with that (* ^ ω ^) i recommend just getting used to [border=] in general since it can be confusing jumping between the two when there's really no added benefit of using [bg=] instead.
as to why,,, i only offer the explanation alteras gave when everyone was still figuring out bbcode, which was that it "only creates one div instead of two. this allows for more complex CSS such as flexboxes." ヽ(´ー｀)┌

2. your picture is "eating into the box" because it's min-width is set to 280px, which is usually a majority of the available space when your big box shrinks to fit screen sizes on mobile! i'm going to assume you're actually looking for it to be 280px on larger devices, in which case you would instead want to use max-width:280px; alongside a smaller value for min-width (the value you'd want it to take on smaller devices.

3. finally, you don't actually have another element that forces it to shrink! to my knowledge, the flex: [value] property works like fractions/percentages when there are other elements to occupy the same space -- otherwise they'll automatically fill any available space regardless of the value you've put in. you'll need another element to force it to shrink when they start competing for space on smaller devices! (─‿‿─)

here's a code that addresses all of the above issues! mobile view!

Spoiler: code ✯

[border=0; margin:auto; padding:0; width:100%; height:100%; height:400px; max-width:700px; background:aliceblue; display:flex; flex-flow: row nowrap;][border=0; padding:0; width:100%; height:400px; /*adding all the min-width/max-width values*/ min-width:120px; max-width:280px; flex:2; background: URL('https://64.media.tumblr.com/6de6bef60f750bea0ea4a281a3b425b8/503f02364c4d50f3-f5/s640x960/66b2b07cc9124c0761ff1e97d584012d332f0ac6.jpg') 50% 100%; background-size:cover; -webkit-filter: saturate(1.5);][border=0; padding:0; height:400px; width:100%; /*deleted a width:280px; here, because you just want this to take up all the space in the picture underneath it to allow for it to resize across devices!*/ background: URL('https://i.pinimg.com/originals/88/aa/5e/88aa5e8923e929221c43f676997302e8.png') 50% 100%; background-size:cover; -webkit-filter: saturate(1.5)][/border][/border][border=0; /*the filler/content element!*/ padding:0; height:400px; flex:3; /*you need to set a min-width for this too to force the other to shrink!!!*/ min-width:200px; background:blue;]hello i am the filler element.[/border][/border]

hello i am the filler element.

as an added comment because i'm not sure if your values were only put in to test some things -- the code will only take into account the value of the property that is latest (?) in the code, i.e. having height:100%; height:400px; is redundant, because only height:400px; will be outputted. more for organisation than anything! (o･ω･o)

and for your second question:
yes yes! you'll see some coders make use of [comment][/comment] to line-break within their codes for organisation. somewhat like this:

[border=0; padding:0; whatever][comment] [/comment][border=0; padding:0; the next line!][/border] [/border]

the way i use and am most comfortable with (bc i'd already grown accustomed to having line breaks back when bbc+ was still here, rip in peace) is adding a line-height:0; to the Main, Big Box container, which makes it so any line breaks in your code don't matter! just remember to state line-height again for any text elements, or you'll get see some weird things happening. read here about line-height and how it works with font-size, though i've been told values of 1, 1.2 and 1.5 are the easiest to default to (o^▽^o)

 

[kaninchen]

ahh thank you again!! I understand it better now! I appreciate your help.