You must Sign In to post a response.
  • Category: HTML

    How to make my website responsive and how to increase the content size such that it fits any webpage

    Below is my css which has header footer and a div for placing the content the problem is i need to increase the div of the body such that it fits automatically when executed in any system and i need to make it a responsive web page which is not responsive now

    /*---Reset----*/

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,block
    {
    padding: 0;
    margin: 0;
    }
    /*body*/
    body {
    background-color:rgb(237,237,237);
    font-family:"Arial",Helvetica,sans-serif;
    font-size: 12px;
    }
    /*Page*/
    .wrapper {
    width:950px;
    margin:auto;
    }
    /*Home Page*/
    .content {
    width:100%;
    background-color:rgb(254,254,254);
    border:1px solid rgb(224,224,224);
    border-radius:5px 5px 5px 5px;
    float:left;
    margin-top:8px;
    margin-bottom:8px;
    min-height:400px;
    }
    /*Menu*/
    .menu {
    background-color: rgb(10,110,178);
    width: 100%;
    margin: 0px 0px 10px;
    padding: 0px;
    height: 40px;
    color: rgb(243,243,243);
    border-radius: 5px 0 0 5px;
    }
    .navigation_first_item {
    border-left: 0px;
    border-radius: 5px 0 0 5px;
    }
    .navitem_s {
    float: left;
    border-right: 1px solid rgb(10,85,125);
    border-left: 1px solid rgb(67,153,200);
    height: 40px;
    background-color: rgb(14,79,114);
    }
    .menu ul {
    }
    .menu ul li {
    float:left;
    display:block;
    list-style:none;
    border-right:1px solid rgb(10,85,125);
    border-left:1px solid rgb(67,153,200);

    }
    .menu ul li.navigation_first_item:hover {
    border-radius:5px 0px 0px 5px;
    }
    .menu ul li a {
    font-size:13px;
    font-weight:bold;
    line-height:40px;
    padding:8px 20px;
    color:rgb(255,255,255);
    text-decoration:none;
    }
    .menu ul li:hover {
    background-color: rgb(14,79,114);
    border-right: 1px solid rgb(14,89,130);

    }
    .clear {
    clear: both;
    }
    /*Footer*/
    .footer {
    height: 50px;
    background-color: rgb(10,110,178);
    color: rgb(255,255,255);
    border-radius: 5px 5px 5px 5px;
    }
    .footer h2 {
    padding: 15px;
    text-align: center;
    }
  • #768992
    Hai Kavitha,
    There are many ways to make the website as responsive. You can use Bootstrap or any other 3rd party library. You can download the libraries and then use in your application. It will make the website as responsive.
    Below is a link for a 3rd party library which can also be used to your website as responsive:

    http://www.c-sharpcorner.com/UploadFile/7dc621/how-to-create-responsive-website-using-Asp-Net/

    Hope it will be helpful to you.

    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com

  • #769103
    but this doesnot have beautiful look and feel i need responsive web design as well as master page with header and footer can you please provide the source for doing that master page with tabs,header,footer and responsive web design is my requirement

  • #769104
    Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen
    HTML5, bootstrap and CSS3 is very suitable to make your web site responsive, try to put all the contents in DIV rather than in table.
    here are some general guidelines
    1. Use Restive.JS
    2. Define Responsive Enhancements
    3. Implement Responsive Enhancements
    4. try to use more li and div tags than table elements
    check out below link for more details
    https://www.w3schools.com/html/html_responsive.asp

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #769215
    There are many way to create responsive website. You are using Bootstrap or other three party library. Used responsive web design make s your web page look good on all devices like Desktop , Mobil phones and laptop etc.Responsive web site design to use CSS,HTML ,Bootstrap and js etc.
    You Need More Informetion to check out below link.
    https://www.w3schools.com
    Regards
    Chandan Kumar
    Training in Noida


Sign In to post your comments