What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help my code is a disaster pls help

alright so i made a code that i rly like and it works great on my computer,, but i made my friends see if it worked for them and it did not... i have NO idea what to do to fix it?? i'm pretty sure the answer is flex boxes but i have zero idea how to use those lol.... anyway,, this is my code? i apologize it's a big chonky mess

Code:
[border=transparent;padding:0;margin:auto;width:70%;height:250px;background-color:#E11C26;overflow:hidden;][border=transparent;padding:0;float:left;width:60%;height:250px;background-size:cover;background-image:url('https://www.houseoffrankie.com/wportal/wp-content/uploads/2018/08/peggy-gou.jpeg');border-right:5px solid #E11C26;][border=transparent;padding:0;padding-top:190px;text-align:center;font-size:40px;color:white;font-weight:bold;text-shadow:5px 0px #A00012;font-family:Montserrat;text-transform:uppercase;]Character Name[/border][/border][border=transparent;padding:0;height:250px;width:319px;float:left;background-color:#E11C26;overflow:hidden;][border=transparent;padding:0;padding-top:10px;height:225px;width:336px;overflow:auto;background-color:#E11C26;line-height:15px;font-size:11px;font-family:Montserrat;color:white;text-align:justify;][border=0px; width: 300px; height: 30px; background: #F1302A;][bg=transparent; display: inline-block; color:white; font-size:15px; letter-spacing:5px; top:2px; left:5px; position:relative; ][fa] fa-play[/fa] [fa]fa-pause[/fa][/bg][bg=transparent; width:200px; height:20px; display:inline-block;margin-left:60px; position:relative; top:-25px;font-size:10px; color:white; overflow:hidden;padding-top:20px;][font=Montserrat]playing [b]hot rod[/b] by [i]dayglow[/i][/font][/bg][bg=width:100px; height:60px;transparent;display: inline-block; opacity: 0; position: relative;top: -60px; ][media=soundcloud]https://soundcloud.com/dayglowmusic/hot-rod[/media][/bg][/border][border=transparent;padding:0;padding-bottom:10px;font-size:20px;font-weight:bold;letter-spacing:3px;padding-top:5px;]— APPEARANCE[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat leo tellus, eget lobortis leo sodales nec. Nulla et ornare nulla. Cras nisi odio, ultricies vel posuere in, ullamcorper eu metus. Phasellus laoreet a arcu vitae pulvinar. In id pharetra augue. Etiam interdum, odio sit amet condimentum scelerisque, nulla mauris dapibus neque, non dignissim neque metus sit amet metus. Donec eu volutpat lacus. Sed ut volutpat nulla, sed rhoncus ipsum. Proin rhoncus nec purus ut condimentum. Nam et vehicula felis. Vestibulum augue dui, tristique sed lacus quis, fermentum ornare tortor. Vestibulum volutpat ultricies molestie. Ut a quam ut lacus ultricies hendrerit.

Integer eget nisi id dui aliquet aliquet. Nullam sed nunc quam. Suspendisse a tellus enim. Quisque fringilla at augue faucibus tempus. Donec a purus ut lectus ullamcorper ultricies. Cras tincidunt tortor ut aliquam volutpat. Integer nec congue nunc, vitae gravida dolor.

Aliquam a dui et mauris vestibulum ultrices sit amet sit amet purus. Sed arcu enim, gravida at velit a, ullamcorper faucibus ante. Vivamus condimentum tortor non ullamcorper ullamcorper. Pellentesque libero justo, placerat at fringilla vitae, ultricies at mi. Aenean scelerisque quam ac ante volutpat, a scelerisque mauris ultricies. Quisque aliquet blandit lacus, lobortis vestibulum neque. Nulla facilisi. Vestibulum ac efficitur purus.[/border][/border][/border][border=transparent;padding:0;width:70%;background-color:#A00012;margin:auto;word-spacing:50px;text-align:center;padding-top:5px;padding-bottom:5px;color:white;text-transform:uppercase;font-family:Montserrat;font-size:15px;]age birthdate sexuality ethnicity gender role face-claim[/border][border=transparent;padding:0;background-color:#57050B;width:70%;margin:auto;position:relative;height:300px;][comment]





[/comment][border=transparent;padding:0;background-image:url('https://i.guim.co.uk/img/media/77ab08c5c2cae70ed5e95248ec2b75bc0e27e8ce/0_257_5210_3126/master/5210.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=d935fea7c43be562a488d300328ab36f');width:200px;height:300px;background-size:cover;float:left;][/border][border=transparent;padding:0;background-color:#57050B;width:275px;height:300px;float:left;border-right:#57050B 5px solid;border-left:#57050B solid 5px;][border=transparent;padding:0;background-color:#57050Bk;width:275px;height:300px;overflow:hidden;][border=transparent;padding:0;background-color:#57050B;width:292px;height:300px;overflow:auto;line-height:15px;color:white;font-family:Montserrat;font-size:11px;text-align:justify;][border=transparent;padding:0;font-weight:bold;font-size:20px;font-family:Montserrat;text-transform:uppercase;letter-spacing:5px;padding-top:5px;padding-bottom:5px;]— personality[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat leo tellus, eget lobortis leo sodales nec. Nulla et ornare nulla. Cras nisi odio, ultricies vel posuere in, ullamcorper eu metus. Phasellus laoreet a arcu vitae pulvinar. In id pharetra augue. Etiam interdum, odio sit amet condimentum scelerisque, nulla mauris dapibus neque, non dignissim neque metus sit amet metus. Donec eu volutpat lacus. Sed ut volutpat nulla, sed rhoncus ipsum. Proin rhoncus nec purus ut condimentum. Nam et vehicula felis. Vestibulum augue dui, tristique sed lacus quis, fermentum ornare tortor. Vestibulum volutpat ultricies molestie. Ut a quam ut lacus ultricies hendrerit.

Integer eget nisi id dui aliquet aliquet. Nullam sed nunc quam. Suspendisse a tellus enim. Quisque fringilla at augue faucibus tempus. Donec a purus ut lectus ullamcorper ultricies. Cras tincidunt tortor ut aliquam volutpat. Integer nec congue nunc, vitae gravida dolor.

Aliquam a dui et mauris vestibulum ultrices sit amet sit amet purus. Sed arcu enim, gravida at velit a, ullamcorper faucibus ante. Vivamus condimentum tortor non ullamcorper ullamcorper. Pellentesque libero justo, placerat at fringilla vitae, ultricies at mi. Aenean scelerisque quam ac ante volutpat, a scelerisque mauris ultricies. Quisque aliquet blandit lacus, lobortis vestibulum neque. Nulla facilisi. Vestibulum ac efficitur purus.[/border][/border][/border][border=transparent;padding:0;width:40%;float:left;][border=transparent;padding:0;background-image:url('https://www.magneticmag.com/.image/t_share/MTU4MDk2OTI0NzUzMjc0NjQ5/peggy-gou.jpg');width:325px;height:300px;background-size:cover;margin:auto;overflow:hidden;][border=transparent;padding:0;background-image:url('https://www.magneticmag.com/.image/t_share/MTU4MDk2OTI0NzUzMjc0NjQ5/peggy-gou.jpg');width:342px;height:300px;background-size:cover;margin:auto;overflow:auto;][border=transparent;padding:0;writing-mode:vertical-rl;float:right;padding-top:10px;font-size:20px;color:white;font-family:Montserrat;letter-spacing:5px;text-transform:uppercase;font-weight:bold;]— history[/border]













[border=transparent;padding:0;background-color:#440001;line-height:15px;font-family:Montserrat;font-size:11px;color:white;text-align:justify;border-right:5px solid #440001;border-left:5px solid #440001;opacity:0.8;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat leo tellus, eget lobortis leo sodales nec. Nulla et ornare nulla. Cras nisi odio, ultricies vel posuere in, ullamcorper eu metus. Phasellus laoreet a arcu vitae pulvinar. In id pharetra augue. Etiam interdum, odio sit amet condimentum scelerisque, nulla mauris dapibus neque, non dignissim neque metus sit amet metus. Donec eu volutpat lacus. Sed ut volutpat nulla, sed rhoncus ipsum. Proin rhoncus nec purus ut condimentum. Nam et vehicula felis. Vestibulum augue dui, tristique sed lacus quis, fermentum ornare tortor. Vestibulum volutpat ultricies molestie. Ut a quam ut lacus ultricies hendrerit.

Integer eget nisi id dui aliquet aliquet. Nullam sed nunc quam. Suspendisse a tellus enim. Quisque fringilla at augue faucibus tempus. Donec a purus ut lectus ullamcorper ultricies. Cras tincidunt tortor ut aliquam volutpat. Integer nec congue nunc, vitae gravida dolor.

Aliquam a dui et mauris vestibulum ultrices sit amet sit amet purus. Sed arcu enim, gravida at velit a, ullamcorper faucibus ante. Vivamus condimentum tortor non ullamcorper ullamcorper. Pellentesque libero justo, placerat at fringilla vitae, ultricies at mi. Aenean scelerisque quam ac ante volutpat, a scelerisque mauris ultricies. Quisque aliquet blandit lacus, lobortis vestibulum neque. Nulla facilisi. Vestibulum ac efficitur purus.[/border][/border
my code SHOULD look like this (cut off a bit bc i couldnt fit the whole image oops)
1595047768821.png

but my friends see this & this
1595047818797.png
1595047838798.png
 

Alteras

The Sleepy One
Moderator
Supporter
So right off the bat, it looks like there's a mismatch in the amount of closing tags to opening tags. You should make sure that there's always a matching number between them so that RTE can't mess with it.

Now, I can only think that it is a problem of sizing. You have everything sized based on 70% width, but your inside blocks are size using pixel. So what is happening is that once the 70% of whatever size the window is gets too low, it'll start doing what flexbox does, sending the overflowing items to the next row.
 
So right off the bat, it looks like there's a mismatch in the amount of closing tags to opening tags. You should make sure that there's always a matching number between them so that RTE can't mess with it.

Now, I can only think that it is a problem of sizing. You have everything sized based on 70% width, but your inside blocks are size using pixel. So what is happening is that once the 70% of whatever size the window is gets too low, it'll start doing what flexbox does, sending the overflowing items to the next row.
would changing all of the sizes to only pixels or only percentages do the trick after i go through and correctly close all the tags? which do you think would be more effective, if so?
 

Alteras

The Sleepy One
Moderator
Supporter
That is generally fine. Since it seems you want this to work on mobile, I recommend the percentage route. You can also play around with max-width and min-width, so that it won't go any smaller on mobile.
 

Alteras

The Sleepy One
Moderator
Supporter
... Actually...

There's a variety of ways to do this actually, but in general with flexboxes, you'll have to just play around with both CSS properties and different structures of divs. Pixels will also work, just give everything a max-width: 100%, but you'll face problems like in the screenshot. My usual solution if you go with that will be to change the surrounding divs to not use width: 70% and replace it with width: 100%; max-width: ##px
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top