Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member
    Join Date
    Apr 2013
    Posts
    30
    Member #
    35925
    Hi Guys,

    Good day
    I have a web site: www dot my-portfolio-site dot site88 dot net/ and I want that the website has to be responsive and perfectly function on mobiles and tablets.

    For your kind information, I know HTML and CSS coding. But I donít know how to convert the website has to be responsive and perfectly function on mobiles and tablets.

    So, please see my source code and suggest which code I should write. And where should I place it?

    No more, I am waiting for your kind response.

    Thank you.

  2.  

  3. #2
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    If your website is already made, I would suggest you use css media queries. I have a tutorial on this forum that describes how this works.

    http://www.webdesignforums.net/threa...art-1-2.39536/

    let me know if this helped.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  4. #3
    Member
    Join Date
    Apr 2013
    Posts
    30
    Member #
    35925
    Hi Andrew Yurlov,

    I am very glad that you spent your valuable time to reply my topics. I followed your RWD tutorial. Yes, your information helps me a lot to understand the topics. But some things I didnít understand. If you donít mind, can you help to clear the following things?
    index.html:
    <div id="sidebar">
    <section class="widget">
    Why you took "section class" instead of "div class"?


    style.css:
    You consider font: 25px/120%. But when I calculate, the result comes 25/16*100=156.25%. So, why you took 25px/120% instead of 25px/156.25%?

    So far I know that 1em=16px
    So, how you get font: .81em/150 %?


    query.css:
    In query.css file you consider wrapper width:95%. How you got it?
    I think you took display:box to create a basic fluid 3 box layout. Am I right?

    Then you use

    box-orient:horizontal;
    box-pack:center;
    box-align:center;

    into the #wrapper. How you got this?

    You took width: 59%; padding: 3% 4%; in percentage value but margin-bottom: 10px; in pixel value. I am little bit confused here.

    You took content width: 59%; how you calculate this?

    You took sidebar width: 30%; how you calculate this?

    When you further "reform" the website to work for tablets you took sidebar width: 100%; why you took this?
    No more, I am waiting for your kind response.

    Thank you.

  5. #4
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Well thats a lot of questions. The website I used for the tutorial I made a long while ago so I don't really remember why I did those things. The main point of the tutorial was to get the idea of media queries across. All those things you asked can be changed by preference. They are there just to alight everything and make it look nice and help get my point across. I could have make a website with just the bare bones with no padding, etc.

    1) For your first question I used a class instead of a div because I wanted it to be more organized in my css. I use Notepad++ which color codes different types of strings so I wanted to make a distinction between div and class. In notepad++ divs are blue and classes are red.

    2) font questions I have no idea why i did that.

    3) next font questions I also don't know.

    4) For the query.css question I think it had something to do with padding between the content and the border of the browser.

    5) For the sidebar questions... well for tablets I thought the sidebar and content next to each other would be too skinny so I decided to make the side bar go after the content rather then right next to it. Again, this is by preference and the space you need for content/sidebar.

    For all your other questions I just fiddled around with the percentages until I got it right. I didn't really calculate anything. I did this tutorial a little too fast. I didn't have enough time to really think about it and im sorry about that.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:53 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com