im using a windows desktop! maybe it’s my theme?
3 Likes
Hmm, it could be. Maybe the aspect ratios of our screens are different? It’s a mystery 
The values I use are adjustable, so if you make your browser window larger or smaller the dimensions would adjust accordingly. I only got it to touch the edge when I really shrunk my browser window.
2 Likes
hmm my display is standard (1920 x 1080) so idk man, def a mystery haha
3 Likes
Coded this entire thread.
Damn was it exhausting-
3 Likes
How do I get the watermark and table of contents to come out of the main big box? I have the closing attributes for all styles, but still, my boxes are just making separate boxes inside of the main one, and I cannot figure out how to get it to add more boxes!
3 Likes
I don’t quite understand what you mean 
Could you show me how it looks like?
2 Likes
I can’t get the extra stuff to form another separate box at the bottom or for my watermark to come out of the scrollbox…
I want to add a table of contents, but separately, not in the scrollbox, but that’s not working…
2 Likes
hmm, send me the raw code please? it’s easier to see what went wrong
2 Likes
Summary
<span style="font-size: 200%; text-transform: uppercase; padding-top: 5% ; padding-right: 20%; padding-left: 20%; padding-bottom: 5% ; display: block; background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: fantasy; background-size: cover; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000 ; letter-spacing: 3px ; color: white ; height: 50% ; width: 40%"> [size=3]A little about[/size] [size=5]
Indian Dressing Culture! [/size] </span>
<span style="font-size: 100%; text-transform: uppercase; padding-top: 5% ; padding-right: 10%; padding-left: 10%; padding-bottom: 5% ; display: block; background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: sans-serif; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000; color: white ; height: 500px ; width: 50% ; overflow: scroll; webkit-scrollbar: 20px; ">
txt
Bridal lehenga:
<img src="https://5.imimg.com/data5/VY/ER/MY-2363941/red-hand-embroidered-bridal-lehenga-500x500.png" alt="bridal lehenga">
Casual Lehenga:
<img src="https://cdn.shopify.com/s/files/1/2395/9105/files/Simple-Cotton-Lehenga_large.jpg?v=1568099129" alt="casual lehenga">
txt
simple Punjabi dress (notice the special flare of the pants):
<img src="https://images.textileexport.in/images/500/20200929/1601372105962117668-Mehta%20Mastani%20vol%2015%20(1).jpg" alt="simple Punjabi dress">
Salwar-Kameez (a fancy version that can be worn to parties):
<img src="https://i.pinimg.com/736x/9d/49/0a/9d490a4462b5935dd1180c82b5e902df.jpg" alt="fancy salwar">
Fancy Palazzo Punjabi:
<img src="https://static.peachmode.com/media/images/feed/72405/promotions/1622668935_1604146661_1_RHFS-RAAZI30033-RF23408-PEACHMODE.jpg" alt="fancy palazzo punjabi">
txt
Bridal Anarkali:
<img src="https://i.pinimg.com/originals/23/0f/ee/230feed49fbbec79e6b92b840751c880.jpg" alt="bridal anarkali">
text
<img src="https://cdn.sareeka.com/image/data2019/net-resham-floor-length-anarkali-suit-116521.jpg" alt="fancy anarkali">
text
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkKcX9tO7QInflD2g66nrT5GVUth15chhRew&usqp=CAU" alt="dailywear anarkali">
text
<img src="https://img2.ogaanindia.com/pub/media/catalog/product/cache/2cc7cc3782dae2c058118a9f2f1b3f37/1/_/1_7246.jpg?v=1.3" alt="odhni / dupatta / choli">
text
</span>
<span style="font-size: 90%; text-transform: uppercase; padding-top: 5% ; padding-right: 20%; padding-left: 20%; padding-bottom: 5% ; display: block; background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: sans-serif; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000">
text here
<span style="font-size: 10%; text-transform: uppercase; padding-top: 5% ; padding-right: 20%; padding-left: 20%; padding-bottom: 5% ; display: block; background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: sans-serif; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000">
taglist: @stella_vigo @J.L.O @Manya707
(request to get added to the taglist below)
</span>
<div align="center">
<span style="font-size: 10 pt ; color: #b3b3b3; letter-spacing: 3px; "> *coded by val*
</span>
</div>
[feel free to inspect if it makes it easier to comb though… And ignore the webkit-scrollbar attribute. It didn’t quite work…]
1 Like
Mind if I step in?
First things first, don’t use different coding languages, alignment and styling goes whack. Try to stick to pure HTML+CSS or BBCode. You can use a different line of code for it and close it for that specific part. Example:
<span style="properties"><span style="properties">yada</span></span>
Second would be not to space out your code. Use the <br> attribute, otherwise, once again, everything goes whack.
Third is that scrollbars can’t be customised here, so the -webkit-scrollbar code won’t work
Fourth (and I’m not sure if this really effects your the product of your code but out of curiosity) why do you add a space before your semicolon? Like so:
code: yada ; and not code: yada; or code:yada;
3 Likes
I know xd it’s a rough draft since I got hungry lmaoo but thanks for the heads up! 
3 Likes
Absolutely not! Welcome to the discussion!
Ah okay!
Hm okay
Yeah, I figured that. I just didn’t get to removing it again lol.
It just makes it easier to comb through for myself, so I just space things out 
OOH thanks for that! I didn’t exactly want it to be like this, but thanks! I didn’t make the images and text separate because I have like three images for each dress lol. I do wanna know how you got the watermark to come out of the main code… I’m going to spend some time beautifying it this weekend, hopefully, and I want to add a table of contents then…
2 Likes
try the stuff I suggested and let me know if it still doesn’t work then
especially for the semicolons, place them directly after the style and add a space after if you want — i know i said i’m not sure if that directly affects your code since I didn’t deep-dive, but it’s a good practice, and as a safeguard. 
3 Likes
Oof, last post was a few months ago XD
I’ve coded a new personal thread that’s basically a diary of one of my characters. I made the first post a slide show. Hope it looks nice, especially on mobile. Took me a while to code it.
3 Likes
This is so cool 
1 Like
Thanks!
Wait till his unsent love letters come out 
they’re quite… interesting
1 Like
Just testing text that’s invisible to light-mode users only as well as text that’s invisible to dark-mode users only.
All right, this should be invisible if you use light mode. Can you read what’s below this paragraph? It should be invisible to you (unless you highlight it, I guess).
This should be invisible in dark mode. For you, the key is within your reach. Hmmm. Have you gone hunting for pianos?
If anyone’s wondering, the color to make dark-mode-invisible text is #3f3f3f
3 Likes
a;sdlkjf stop calling me out 
/j
1 Like
Just helping some people with looking for keys 
1 Like