locked
how to create repsonsive layout for the HTML for desktop,mobile RRS feed

  • Question

  • User569149469 posted

    I have a code like this

    <div class="signup">
            <div class="contents">
                <div class="text">
                    <h3>Sign up </h3>
                    <p>Sing up info.</p>
                </div>
    
                <div class="controls">
                    <input name="sign-up-email" id="sign-up-email" type="text" maxlength="255" value="Enter your email" />
                    <a href="#" class="btn"></a>
                </div>
            </div>
    <div>

    the condition for this is

    Mobile Sizes:

    Heading Font: 12px

    Paragraph Font: 4px

     

    Tablet Sizes:

    Heading Font: 10px

    Paragraph Font: 8px

     

    Desktop Sizes:

    Heading Font: 10px

    Paragraph Font: 8px

    Site Background Colour Above: #fff  /// how to assign background color above 

    Site Background Colour Below: #eff1f1

    Panel Background Blue: #2183c2

    Heading Font Family: Ubuntu (Google Font)

    Heading Font Weight: Bold

    Paragraph Font Family: Ubuntu (Google Font)

    Button Colour: #0c5382

    Paragraph Font Weight: Light

    how to do this in JSFiddle and which framework to use .what are the frameworks supported by JSfIddle I can use.

    for idea https://codepen.io/aspnetgal/pen/VBJEvL

    Thursday, August 16, 2018 7:28 AM

All replies

  • User131525570 posted

    You can use media variable for making the screen responsive

    Consider the following example:

    <div class="pflContainer">
    <div class="section">
    <table>
    <tr>
    <td>
    <div id="divEditPicture">
    @if (Model.CurrentEmployee != null)
    {
    string virtualDir = ConfigurationManager.AppSettings["virtualDir"];
    string folderpath = Server.MapPath("~/" + virtualDir);
    string filename = Model.CurrentEmployee.UserName + ".jpg"; // use PictureURL eventually
    string fullPath = Path.Combine(folderpath, filename);

    <div style="text-align:left;margin-bottom:5px;border: 4px;">
    @*style="text-align:center;"*@
    @if (File.Exists(fullPath)) //Model.SelectedGMUser.PictureURL != null
    {
    <img src="~/@virtualDir/@filename" class="user-image-inside" alt="@Model.CurrentEmployee.UserName" title="@Model.CurrentEmployee.UserName" />
    @*<div class="user-image" style="background: url(@fullPath) center top;" alt="@Model.SelectedGMUser.UserName" title="@Model.SelectedGMUser.UserName"></div>*@
    @*<img src="~/Uploads/@filename" alt="@Model.SelectedGMUser.UserName" title="@Model.SelectedGMUser.UserName" class="user-image" />*@
    }
    else // no picture available yet
    {
    // display default image as a placeholder
    @*<div class="user-image" style="background: url(/Content/images/default-user.png) center top;" alt="No image available" title="No image available"></div>*@
    <img src="~/Content/images/default-user.png" class="user-image-inside" alt="No image available" title="No image available" />
    }
    </div>

    }
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <label class="lbl-header"><strong>Employee Name</strong></label>
    <p>
    @{
    var FullName = Model.CurrentEmployee.LastName + ", " + Model.CurrentEmployee.FirstName;
    @Html.DisplayFor(m => FullName)
    }
    </p>
    </td>

    </tr>
    <tr>
    <td>
    <label class="lbl-header"><strong>Position/Organization</strong></label>
    <p>
    @Html.DisplayFor(m => m.CurrentEmployee.Position)
    </p>
    <p>
    @Html.DisplayFor(m => m.CurrentEmployee.Organization)
    </p>
    </td>

    </tr>
    <tr>
    <td>
    <label class="lbl-header"><strong>Phone Number</strong></label>
    <p>
    @Html.DisplayFor(m => m.CurrentEmployee.PhoneNumber)
    </p>
    </td>

    </tr>
    <tr>
    <td>
    <label class="lbl-header"><strong>E-mail Address</strong></label>
    <p>
    @Html.DisplayFor(m => m.CurrentEmployee.WorkEmail)
    </p>
    </td>

    </tr>
    <tr>
    <td>
    <label class="lbl-header"><strong>Room</strong></label>
    <p>
    @{
    var Room = "Building " + Model.CurrentEmployee.BuildingNumber + ", " + Model.CurrentEmployee.Location;
    @Html.DisplayFor(m => Room)
    }
    </p>
    </td>

    </tr>
    </table>

    </div>
    <div class="section">
    @Html.Partial("_EmployeeProfileHierarchy")
    </div>
    <div class="section">
    <h4> Other Employees in @Model.CurrentEmployee.OrgUnit</h4>
    <div class="search-result-panel" style="height: 600px; overflow-y: auto;">@Html.Partial("_CardView", Model.OtherEmployees)</div>
    </div>
    </div>

    CSS: 

    .pflcontainer {
    font-size: 0; /*remove white space*/
    }

    .section {
    font-size: 16px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 30%;
    margin-left: 10px;
    }

    @media (max-width: 1200px) { /*breakpoint*/
    .section {
    display: block;
    width: auto;
    }
    }

    check this link : https://css-tricks.com/responsive-data-tables/

    Thursday, August 16, 2018 3:47 PM
  • User1204533129 posted

    Use Bootstrap and its controls in you code , it will become responsive automatically. 

    look here once 

    https://www.w3schools.com/booTsTrap/default.asp 

    Best regards,

    kamal.

    Thursday, October 4, 2018 7:30 PM