r. full-screen layouts
TIRAMISU。 layout tutorials #hiatusHellooooo! 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:
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!
Comments