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