r. full-screen layouts

TIRAMISU。 layout tutorials #hiatus

Hellooooo! I'm back with this tutorial requested by debbiesiro-official! This time, I'll be teaching how to make full-screen layouts! Well, I hope this helps you guys out!

This tutorial is going to be rather basic, since I've already taught how to make scrolling layouts, side by side text boxes, etc. However, if you guy really want me to, I wouldn't mind adding anything else to this tutorial in the future.

 

I've previously said that I use a 'base' code when I make a layout, and it's almost the same for every layout I code. But, in this case, forget that base code I had talked about earlier, because to make 'full screen' layouts, you'll learn to use something else.

In order for your layout to be "full screen," the width of your layouts needs to be 1014px. What's with this random number? Well, I don't really know... this is what works out for me when I make a layout. So, this is how you should start your code:

< div style="width:1014px;">< /div >

 

Pretty simple, right? After that, you will need to add margin-left:-16px and float:left. Because AFF has their foreword/description/chapter layout set at a certain margin from the background, you will need to have a negative margin for your layout in order to go full screen.

< div style="width:1014px;margin-left:-16;float:left;">< /div >

 

Now, you can either choose to create a new div for your background/padding/border/etc, or you can just add it to your first line of code. I usually choose to create a new div, so that's what I'll do...

< div style="width:1014px;margin-left:-16px;float:left;">
< div style="width:914px;height:500px;padding:50px;background-color:#EEE;float:left;">one< /div >
< /div >

 

Your layout should now look something like this:

one

After this, you just continue to add whatever you want inside this little box. I wouldn't recommend using this for stories, since this type of layout is rather difficult to view on mobile. I'm also not sure if this works with blog posts, so... yeah.

Anyway, I hope this explains full-screen layouts?

 

I have a lot of tutorials left to do, so please be patient with me!

Also, I really appreciate the comments you guys leave! They're really nice to read!! So thank you for those!

Like this story? Give it an Upvote!
Thank you!
eggtion
tiramisu: hey everyone! sorry for not updating! i plan to return later this year and reopen this place with new and revised tutorials. i hope to see you guys when it's released! thank you for your patience! ^^

Comments

You must be logged in to comment
Lost_Pharaoh
#1
Chapter 5: I am still really confused on where to put the codes
aristarchus
#2
Chapter 5: hi !! ahh so glad to hear that you're thinking of returning. this thread has helped me so much,, welcome back :-)
seungjjang
#3
Hi! Your tutorials are easy to understand and helps me with coding in aff..so thank youu<3
And I have a question...do you know why this: https://imgur.com/a/Ajlnx happens?
Just wondering if you've encountered a problem like this.. ouo;
mochiji
#4
ajndaj im glad ur back :')
Iamdead
#5
woHOOo MAyBE Now i cAn uNdErsTAnd SUch a ThInG as CodINg
daNK yOU So mUCh <3
seonho
#6
Chapter 16: i am So Damn Glad ure back
_SakuraRoleplay_ #7
Chapter 15: haaalp~ T.T i'm trying to do that horizontal scroll with bigger size but i can't do it T.T