BBCode Help

Status
Not open for further replies.

rissa

the clairvoyant pterodactyl
Original poster
VENGEANCE
DONATING MEMBER
MYTHICAL MEMBER
BBCODE AND DIVBOX INQUIRIES
A place specifically designed for bbcode and divbox related questions! Need help figuring out a bit of code? Not sure why your code keeps breaking? Unsure if what you want to do is even possible? Fret not! This thread's creation is for the sole purpose of helping you figure out your coding, one question at a time.
F. A. Q.
H E L P F U LxxL I N K S

 
Last edited:
Hello new thread!
My question is:
What is the best way to create a mobile-friendly divbox?

I have seen very good divboxes on my phone that size up correctly, and I am wondering how they align so perfectly.
Thanks!
 
display: inline; should do it? In theory. Unless my memory sucks.
 
Hello new thread!
My question is:
What is the best way to create a mobile-friendly divbox?

I have seen very good divboxes on my phone that size up correctly, and I am wondering how they align so perfectly.
Thanks!

Relative values
The first, and one of the easiest ways, is to avoid using fixed values in your widths. Using a relative value such as a percent (%) makes it such that it adjusts to the size of the screen you're viewing it from.

The drawback: What may look good on a standard screen may look awkward and full of unwanted space on a larger screen. I find that it's harder to control the layout when using a percentage value for my outermost container.


max-width
My very unfinished and almost abandoned div guide in my Playground explains what max-width and how to use it here on Iwaku. c:

Most, if not all, my mobile friendly codes have a max-width in their outermost container.


Flexboxes
A bit of a more complicated option, but it's another that I would recommend.

Flexboxes help with layouting your divs. For example, if tou have a four column layout, it'd be pretty hard to read the text when you're on mobile. It'll be all squished up together, possibly to the point that only one word will show per line. It gets worse when a padding is added into the mix. With flexboxes, you can keep the four column layout when you're on desktop, but wrap when you view it on mobile.

The pinned post in my Playground is a live sample of what I mean. It aint no four column layout, but it should be enough to get the point across.

You can learn more about flexboxes in this handy little resource right here
 
Relative values
The first, and one of the easiest ways, is to avoid using fixed values in your widths. Using a relative value such as a percent (%) makes it such that it adjusts to the size of the screen you're viewing it from.

The drawback: What may look good on a standard screen may look awkward and full of unwanted space on a larger screen. I find that it's harder to control the layout when using a percentage value for my outermost container.


max-width
My very unfinished and almost abandoned div guide in my Playground explains what max-width and how to use it here on Iwaku. c:

Most, if not all, my mobile friendly codes have a max-width in their outermost container.


Flexboxes
A bit of a more complicated option, but it's another that I would recommend.

Flexboxes help with layouting your divs. For example, if tou have a four column layout, it'd be pretty hard to read the text when you're on mobile. It'll be all squished up together, possibly to the point that only one word will show per line. It gets worse when a padding is added into the mix. With flexboxes, you can keep the four column layout when you're on desktop, but wrap when you view it on mobile.

The pinned post in my Playground is a live sample of what I mean. It aint no four column layout, but it should be enough to get the point across.

You can learn more about flexboxes in this handy little resource right here
this thiS THIS THIS HTSI

i usually add height: auto; to my outermost div as well

also if you left click->inspect->second button from the left (looks like a phone in front of a tablet) it will show you a "mobile" version of the current page (and yer codes ofc)!
flames is still a godsend
 
*flails wildly and screeches*
Is there some reason my images are not jiving with my div boxes? I blatantly stole used Elle J's divs in the last BBCode help thread and I cannot get my images to scroll properly with the coding. It gets cut off at the bottom and doesn't reach to the side. I even tried using a picture that was the same exact size as the one she used and no luck.

text


Code:
[div=background-image:url(http://static.tumblr.com/dee7c70293ee688fe656fafc418b9f35/csoop8h/URsnsmlhc/tumblr_static_tumblr_static__focused_v3.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]

halp pls my loves
 
*flails wildly and screeches*
Is there some reason my images are not jiving with my div boxes? I blatantly stole used Elle J's divs in the last BBCode help thread and I cannot get my images to scroll properly with the coding. It gets cut off at the bottom and doesn't reach to the side. I even tried using a picture that was the same exact size as the one she used and no luck.

text


Code:
[div=background-image:url(http://static.tumblr.com/dee7c70293ee688fe656fafc418b9f35/csoop8h/URsnsmlhc/tumblr_static_tumblr_static__focused_v3.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]

halp pls my loves


How are you wanting it to look? From what I can see the div is working fine.

The reason the image is getting "cut off" is probably the no-repeat background, though I'm not 100% what yer wantin' it to look like
 
How are you wanting it to look? From what I can see the div is working fine.

The reason the image is getting "cut off" is probably the no-repeat background, though I'm not 100% what yer wantin' it to look like

Well when I scroll, it doesn't continuously scroll. When I get to a point, it just turns black and the image ends. Specifically when I scroll up.

Elle's code that I copied for reference:
text


Code:
[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]

It doesn't end in black like mine, and it's the same code just with a different url for the image.
 
  • Useful
Reactions: HelloBeautifulChild
text


like dissss? i added a bg-size code and it got rid of the cut off
 
YISS THAT'S IT
thank you dear
 
  • Love
Reactions: rissa
Well when I scroll, it doesn't continuously scroll. When I get to a point, it just turns black and the image ends. Specifically when I scroll up.

Elle's code that I copied for reference:
text


Code:
[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]

It doesn't end in black like mine, and it's the same code just with a different url for the image.
ahem...

Elle is using an image larger than your screen, so it does eventually black, but not visibly to you 8D
 
I have been playing with things a little out of my element so I apologize if this ends up being a painfully ridiculous question, but I'm trying to get a circular floating box with an image background to have a little padding from the text that is next to it. My simple attempts at just putting "padding: 10px" is not helping me here.
Error | IwakuRoleplay.com
[div=background-image: url(https://i.imgur.com/NSYlAiH.jpg);
background-repeat: no-repeat;
float: left;
border: 1px double #9A9783;
border-radius: 50%;
height: 350px;
width: 350px;
padding: 10px;]

[/div]
 
I have been playing with things a little out of my element so I apologize if this ends up being a painfully ridiculous question, but I'm trying to get a circular floating box with an image background to have a little padding from the text that is next to it. My simple attempts at just putting "padding: 10px" is not helping me here.
Error | IwakuRoleplay.com
[div=background-image: url(https://i.imgur.com/NSYlAiH.jpg);
background-repeat: no-repeat;
float: left;
border: 1px double #9A9783;
border-radius: 50%;
height: 350px;
width: 350px;
padding: 10px;]

[/div]

Try putting the padding in a separate div of it's own :)
 
Try putting the padding in a separate div of it's own :)
I tried it inside the other div and outside and didn't seem to get much change either way - unless I missed some portion, which is entirely possible.

[div=background-image: url(https://i.imgur.com/NSYlAiH.jpg);
background-repeat: no-repeat;
float: left;
border: 1px double #9A9783;
border-radius: 50%;
height: 350px;
width: 350px; ]
[div=padding: 10px;]
[/div][/div]

Edit:
With help from Wolk, I think I may have gotten this sorted out so that it looks nice now.
Thank you, though, EJ! :)
 
Last edited:
Okay, so @Elle Joyner and I have been trying to figure this one out.

Here is the coding I used:

Code:
[div= background-image: url(https://i.pinimg.com/564x/e3/3b/85/e33b8544e04cb23dacd300874cd9b050.jpg); background-size: cover; width:800px; height: 700px; border: 10px; border-style: solid; border-color:#190729 ;][div=padding-top: 50px; padding-bottom: 70px; padding-left: 35px; padding-right: 35px;]
[div= background-color:#b09d9e; margin: auto; width: 650px; height: 550px; opacity: 0.9; background-overflow: overflow; overflow: scroll; border: 6px; border-style: double; border-color:Pink;]


[div=header; color: #C8A2C8; text-align: center; font-size: 10px; font-family: 'Arizonia'; font-style: normal;] [SIZE=7][glow=#C8A2C8][FONT=Great Vibes]Tomoe Yuuta[/FONT][/glow][/SIZE][/div][/div][/div][/div][/coding]


Here is the image I want to use as a background.

e33b8544e04cb23dacd300874cd9b050.jpg


Now Elle says she can't see the image, but I've been reusing that exact code (With some minor tweaks) for a while now and it's worked just fine.

Here is my test chamber

Now for me, it won't show the whole image, which isn't very large. 'cover' zooms in on the picture, while both 'overflow' and 'center' make duplicates.

In PMs it looks exactly as it should. How can I fix this? What am I doing wrong?
 
Okay, so @Elle Joyner and I have been trying to figure this one out.

Here is the coding I used:

Code:
[div= background-image: url(https://i.pinimg.com/564x/e3/3b/85/e33b8544e04cb23dacd300874cd9b050.jpg); background-size: cover; width:800px; height: 700px; border: 10px; border-style: solid; border-color:#190729 ;][div=padding-top: 50px; padding-bottom: 70px; padding-left: 35px; padding-right: 35px;]
[div= background-color:#b09d9e; margin: auto; width: 650px; height: 550px; opacity: 0.9; background-overflow: overflow; overflow: scroll; border: 6px; border-style: double; border-color:Pink;]


[div=header; color: #C8A2C8; text-align: center; font-size: 10px; font-family: 'Arizonia'; font-style: normal;] [SIZE=7][glow=#C8A2C8][FONT=Great Vibes]Tomoe Yuuta[/FONT][/glow][/SIZE][/div][/div][/div][/div][/coding]


Here is the image I want to use as a background.

e33b8544e04cb23dacd300874cd9b050.jpg


Now Elle says she can't see the image, but I've been reusing that exact code (With some minor tweaks) for a while now and it's worked just fine.

Here is my test chamber

Now for me, it won't show the whole image, which isn't very large. 'cover' zooms in on the picture, while both 'overflow' and 'center' make duplicates.

In PMs it looks exactly as it should. How can I fix this? What am I doing wrong?
not sure what the issue is, the code works fine and we can see the image.
 
not sure what the issue is, the code works fine and we can see the image.

The whole image, or is it only zoomed into the upper half? Cause no matter what I do, I can't see the full image,
 
@Kōsetsu no oni Your post looks like this on my end [spoili]
TvJP3dU.png
[/spoili]
To get the full image to show as the background, try changing the background-size to contain or changing the dimensions to either have a smaller width or a bigger height.
 
@Kōsetsu no oni Your post looks like this on my end [spoili]
TvJP3dU.png
[/spoili]
To get the full image to show as the background, try changing the background-size to contain or changing the dimensions to either have a smaller width or a bigger height.

That's exactly how it looks on my end I've used bigger dimension pictures than this an used overflow and it turned out fine. Overflow, contain and center all make the image divide itself bilaterally. Cover makes it crop the image and zoom in (Best way I can describe it.))

But again, I've used much larger images than a 500x718.

Also, if I try to shrink it, it quadruples the image.
 
That's exactly how it looks on my end I've used bigger dimension pictures than this an used overflow and it turned out fine. Overflow, contain and center all make the image divide itself bilaterally. Cover makes it crop the image and zoom in (Best way I can describe it.))

But again, I've used much larger images than a 500x718.

Also, if I try to shrink it, it quadruples the image.
You can stop the image from repeating by adding in background-repeat:no-repeat. You could also try using a percent value for the background size, that might work better for what you want to achieve.
 
Status
Not open for further replies.