CSS Trick Center The Body in Wapka

In this tutorial I will show you how to center your site body with CSS trick in wapka.. This will add nice look to your site

This look will be awesome for your PC version of wapka site.. Instead of long flat page, it will make site in the center of the window, lets do it..

  1. Login to your wapka account
  2. Goto ES > WAP2 > Classes Settings > Click EDIT STYLE SHEET FILE link > Insert the following code in text area and press edit button >
  3. in above code, we used following CSS attributes
    1. We set max-length to 600px, you can set other too like 800px, 400px etc, all depends to you, how much wide you wanted to set your site..
    2. We set top margin to 0 because we doesn't want any space between top of browser and our site body..
    3. WE set left and right margins to 'auto' because we want our site in center of the screen, thats what our purpose of the tutorial is so please don't change it..
    4. We set bottom margin to '1px' (This is the gape between bottom of browser and our last item on site).. You can increase or decrease it as you like.
    5. At the end we used padding property, it will set our items 2px away from the corners of page
  4. Thats it, goto your Homepage
Remember that this script will not have impact on mobile browsers, so don't get confused just use it and users from the PC will love your site.. Enjoy and comment if you like this tutorial..
Join our facebook page
Create your own free wapsite in minutes
Request New Tutorials

11 comments:

  1. Thanks alot Ahmed Habib.

    I always enjoy all ur Tutorials.
    I recently got my .com domain for my wapka site.
    I now signed up for a customised email e.g wapka@mydomainname.com from my control panel.
    I was told to upload a file with .htm format to my wapka site homepage in order to verify the email account.
    I dont know how i can upload that file to my homepage.
    I only have 3days more to verify it before the email account will be deleted.
    Please help me, thanks.

    ReplyDelete
  2. Anonymous @ You will also have more options there like meta tags verification etc, just select Meta tags and then paste all the code in ES > Global Settings > Head tags....

    ReplyDelete
  3. How I can find more user for my site, How I can add friend list in user profile... Plz help me Habib

    ReplyDelete
  4. I like your post and thanks for sharing it.

    ReplyDelete
  5. it doesnt work 4 me..
    i think it's bcoz of d link of the stylesheet shuld insert in headtag..
    plz give me tht...

    ReplyDelete
  6. This code is not working in my site.
    plz help........

    ReplyDelete
  7. it work in admin mode only pls help me i want it for user mainly or for both.thank

    ReplyDelete

You are always welcome to add comments and suggestion about the tutoiral. Please note that, we do not allow misuse and if you have any questions write briefly so that our moderators can understand your message and reply as early as possible.