Responsive Web

Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.


#html-builder-navbar div, #html-builder-navbar ul, #html-builder-navbar ul li a){
    height:100% !important;
#html-builder-navbar .dropdown-menu{
    height:auto !important;
#html-builder-navbar .row{
    border:none !important;
.bg-nav-item {
    background-color: #edeef2!important;
.bg-save {
    background-color: #17c671!important;
    background-color: #525d7d!important;
.text-main {
    color: #525d7d!important;
.text-white {
    color: #fff !important;
.font-weight-light {
    font-weight: 450 !important;
.font-weight-main {
    font-weight: 600 !important;
<div id="html-builder-navbar" class="header-navbar collapse d-lg-flex p-0 bg-white border-top not-editable">
            <div class="container-fluid m-0 p-0">
              <div class="row mw-100">
                <div class="col m-0 p-0">
                  <ul class="nav nav-tabs border-0 flex-column flex-lg-row p-0 m-0">
                    <li class="nav-item bg-nav-item">
                      <a href="#" class="nav-link p-4 m-0"><i class="fa fa-arrow-left text-main"></i></a>
                    <li class="nav-item">
                      <a  class="nav-link p-4 text-main font-weight-main m-0">Happy Markerter Template</a>
                    <li class="nav-item dropdown bg-nav-item">
                      <a class="nav-link p-4 m-0" data-toggle="dropdown"><i class="fa fa-cog 

Open in new window

Normally when I see a website using Bootstrap 4 I see the grid classes being used in the HTML. Recently I used a developer who has now managed to implement the grid glasses in the CSS. Is this normal practice and does it work out better?

I'm trying to understand if there are performance vs maintenance trade offs to consider as I'm finding it hard to understand the grid behaviour for HTML elements since the grid classes are not in the HTML. Is this related to Bootstrap Sass mixins?
I need some help with an Android Studio app.  it is a simple webview app.  I had it working fine but now the pages open in the android browser insted of staying in the app.  I amvery new to this and I have some other things to work on so I could use some =one who could fix this for me.
Published iOS app about 18 months ago using Xamarin Studio.  Now that its Visual Studio 2017, need to recreate Apple certificates and profiles and then use fastlane to install them on my Mac.  App builds fine and it runs on an iPhone attached to my Mac.  Looking for a consultant who can help me with this process.
I have a website on an internal domain. It's hosted on IIS and uses some javascript scripts and SKEL for for content generation, resizing, it works well as a responsive web page.
There is a form to send email, it is centered around using an external email provider. I have set it up so that it puts the requested data, (type of info requested, name, email, etc) and puts that where it belongs in the users own default email client. (generally Outlook). We have our own SMTP server.
My question is what is the simplest approach to get email sent using the form? The server is Windows server 2016, IIS. I have looked up stuff and see PHP, ASP it's kind of crazy how complicated it gets. Maybe I have not found the right tutorial.
I am trying to make responsive website.  But I am not getting exact width and height (viewport) of  samsung s9+ (landscape and portrait mode) for media query ?
Can someone please help me out..
Close menu when item has been clicked on a mobile in html? I have a website where the menu is not closing on item click on a mobile, this brings a problem as people are not able to see below the menu now they have to go up and click again the menu so that it will be hidden now some people don't know this and they complain and don't proceed with registration, I've also added the modal and the modal just appear beneath the menu and people don't see it at all they keep on clicking the button and don't see anything, but the modal is presented it just that its beneath the menu.

Oops I've tried uploading the file but error of extensions was thrown.
I've been trying to fix this for days now. Using Xamarin and Visual Studio, I deleted the asset catalogs/media folder then I used app icon set creator to create the icons. I then went into info.plist under visual assets and hit add catalog, then dragged the icons into the slots.

No matter how many times I try this I get the same error.

Since this is xamarin, I was told I have to create an IPA file and upload using ApplicationUploader.  The file uploads but then I get an email from Apple with a build file error shown above.

Does anyone know how to fix this?


Missing Info.plist value - A value for the Info.plist key 'CFBundleIconName' is missing in the bundle

Open in new window

Hello Experts,

I'm looking for help on creating a responsive navigation with a hamburger icon that uses FlexBox only no Floats. All of the examples I find on the web have to do with Floats. I would like to have the logo to be positioned on the top left. I would like to display the hamburger icon to the right of the page using a media query for phones/tablets (I can fix the media query myself).


  <a href="#" class="logo">Logo would go here...</a>

          <li><a href="#">Item 1</a>
          <li><a href="#">Item 2</a>
          <li><a href="#">Item 3</a>
          <li><a href="#">Item 4</a>


Open in new window

I installed open cart for ecommerce website and i want to have multi stores app with web landing page, do i need to install the marketplace module first then buy theme with installation or buy theme then install marketplace module?
My boostrap menu is not functioning properly for mobile. Below is my site.Master page. On a desktop the default page displays properly and when I shrink the window, I get the hamburger and the submenu items. When i open the site on a mobile device:
  1. The menu is still displaying as it would on a desktop (no hambuger)
[list=2]When I click/press the Services link/button, nothing happens.[/list]

What am I missing / doing wrong?

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %>- My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <asp:PlaceHolder runat="server">
        <script src="<%: ResolveUrl("~/Scripts/modernizr-2.6.2.js") %>"></script>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-submenu.css" rel="stylesheet" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <form runat="server">
        <asp:ScriptManager runat="server">
                <asp:ScriptReference Name="jquery" />

Open in new window

I have a mega menu opening on desktop, on hover over a parent nav strip. The parent nav items are links on click.

The same menu is to be used on landscape tablet. Without on hover, click is used to launch the mega menu. So we lose the click to launch the parent nav linked page.

1. What is the best pattern for this? (I've seen a tap and hold open the menu on some sites, with quick tap to launch link).

2. For keyboard only navigation what is the best alternative to Enter, after tabbing to the parent nav item, to launch the menu? Down cursor?
I have a responsive handburger menu on this site:
Its a wordpress site running Genesis Theme Framework with a child theme.

You need to scroll down 150px to see the menu, and set your dev console to look at it as a mobile.

It nearly works how we want it, but it doesn't slide back to the left when an item is clicked.
Normally this needn't be a problem. It was designed for linking to other pages. But this menu's links go to ids on the same page, using the PageScroll2id plugin. So, as you'll see, it remains in place.

Can you tell from the dev console what I need to do, either with js/jquery or with css to make it slide away when an item is clicked?

Thank you
Navigation extends full width of nav bar in  Chrome  but not in Firefox.  How do I modify navigation so it extends full length for all browsers?  I have modified the css but when I make it work in one browser it fails in the other.

Chrome screenshot

Firefox screenshot

Beta site

.main-navigation-menu a {
    display: block;
  padding: 14px 1.9em;}
#navi-wrap {
    border-top: 0px solid #004488;
    border-bottom: 0px solid #004488;
.main-navigation-menu li:last-child { border: none; }

Open in new window

I had this question after viewing How to redirect after a user shares something one facebook.
Hi, I am a man in the street who knows nothing about coding……Please help, My aim is that when FB visitors click on this link on my post:
It will obviously take them to share dialogue, and when they click share, I need them to be redirected (URL Redirection or dialog/feed) to this one:    this one has to pop up. So how do I join these hyperlinks to make one?
I tried this:
 but it gives me a this blank page after clicking SHARE:
In short this should  be a full page display, shown within
and a popup page should be compatible to Mobile web apps as well.
Where did I go wrong???????
I've created a template in WordPress and I want the page it generates to scale as the viewport size changes. I've done this outside of WordPress by first expressing all my units in rems and then  setting the html font-size proportional to the viewport size by placing the code below in the DOM Ready section:

var viewport_width = $( window ).width();  // Returns width of the current browser viewport
		if (viewport_width < 1400) {	        
			font_pc = (viewport_width / 1400) * .625 * 100);   
			$(html).css("font-size", font_pc + '%');

Open in new window

Actually this starts the scaling when the viewport is < 1400px and  In this example, if the viewport were 1200px font_pc would e 53.6% and that would become the html element font-size, reducing everything expressed in rems.

My question is, how can I pull this off for a WordPress template php file?

We have a computer that is connected to a Cisco ASA router. This local router sets up an encrypted tunnel to a Cisco ASA router at a remote location. This remote location has a couple of web servers. From the workstation, I am able to ping (by DNS name and IP address) both web servers, see the ports 80 and 443 open and can always resolve one of the web pages (we'll call it The other webpage we'll call we cannot resolve.

After researching this with wireshark, I can see that the workstation sends a "Client Hello" to, but doesn't see any "Server Hello" response back. However, from the web server side, a packet capture reveals that it does attempt to send its' "Server Hello, Certificate, Server Key Exchange, Server Hello Done" to the workstation, but it doesn't make it to the workstation.

If we change the workstation's IP address to another IP address in the local subnet, it is able to communicate with the web server for about a day and then something locks up that IP address permanently and then SSL handshake will no longer complete until I change the workstation IP address to a new/different IP address in the local subnet.

If we connect this workstation and Cisco ASA Router to a different commercial ISP line, the web page at resolves every time.

We've tried changing the MTU size on the workstation and on the local Cisco ASA router and that doesn't resolve the problem.

The firewalls in …
Hi Experts,

One of our websites was compromised and after been restored, noticed the website is in mobile view by default and not showing correctly on desktop, entire layout is not right, in the footer of the page they are not align in 4 columns horizontally, but aligned vertically.  And the logo is not to the left and the banner to the right. Not sure whats happened with the css and some help on this would be much appreciated to restore our site n business online.  url:
Dns look up
I have a web site that is responsive and works well on various mobile devices.  The web pages are currently not online, as my client is by their choice,  manually downloading it to tablets to use.

How do I make it an app that can be opened and downloaded -- ideally without having to be online once downloaded.


I am try to implement the SSO and LTPA for Mobile First Platform, but I don't know how to achieve this.

we are using the Websphere Liberty 8.5.3 and it's running on Linux red-hat.

Could somebody give me some good materials or link for this.

Responsive Web

Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

Top Experts In
Responsive Web