Responsive Web

962

Solutions

8

Content

i
The collection of articles, videos, and posts on this topic.

1K

Contributors

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.

Share tech news, updates, or what's on your mind.

Sign up to Post

Need to display a few dozen photos / cross-platform

What quick to code cross-platform solution is there to enable people in my tour to follow along with their smart phones? I have about 25 images which I want to provide them and make it easy to jump to Image #14, for example.

I want to start simple and give them just a Next and Previous button and a Jump To option.

I understand I could write this as a responsive web page, but would need a back-end service and a database of images. But I want a canned solution I can configure and get up and run with.

I hope for a generic platform which is well enough known that I could hire an outside developer to code for me in about 15-20 hours of work.

What can you suggest?

Thanks
0
4 Comments
Upgrade your Question Security!
LVL 12
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Go Premium
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.
0
6 Comments
Which on is the best tool for mobile web applications/apps (Python or Java or asp.net)
0
3 Comments
I had someone design the website and I needed to fix some issues, I don't much of wordpress design and I wanted to disable google maps from my website, I found where to disable it and I just noticed that my other pictures on all pages aren't loading and missing. How could I go back or check if some else made changes? and how to fix this issuenot loading picturesAs you can see on this picture there should be more pictures but aren't there.

Please advise
0
4 Comments
Hi,
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..
0
3 Comments
Hi Experts,

       I had created a web page.  For the webpage to be responsive, I had included media queries.  The page is okay in desktop but not in mobile views and tablet views.
Usually, I have to scroll horizontally to see the complete page in mobile and tablets view.  I think scrolling horizontally on mobile and tablet views are not correct.   I had seen sample responsive pages where the scrolling happens only vertically, we need not scroll horizontally for mobile and tablet pages.   I had attached the web page code as zip as well as pasted code for the html and css file.
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Ez proxy</title>
  </head>
  <body> 
    <div class="container-fluid">
	<div>
	<div id="mybanner">	   
	</div>  
	<div id="box" class="row" style="Text-Align:center">		
	<div class="card border-success col-xs-11 col-sm-11 col-md-5 col-lg-3" style="width: 15rem;">
	   <p><span><strong>Access these resources at Northern Territory Library<br>No Login

Open in new window

…
0
6 Comments
Why should you have a responsive website? What does it take to have one for your business and what are the benefits of it. This article will acquaint you with all the nuances of a responsive website design.
0
0 Comments
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.
0
15 Comments
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?

thanks!!!!

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

Open in new window
0
0 Comments
Hi Experts,

I have a parent div with class container with min-height 100% and having a border.    I have child div's But on mobile view parent container border is not growing with the size of child elements.  Child div's comes out of parent div.    Please see the screen and code below for more information.  You can see the third card is outside the main container.  Please help me in resolving this issue

  <body> 
    <div class="container">
    <div class="jumbotron">
        <img  src="images\banner.png"/>
    </div>
	<div class="row" style="Text-Align:center">
	
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Resources available to access at Northern Territory Library Only</strong></h5></p>
	   <ul>
	         <li><a href="https://ntln.idm.oclc.org/login?=url=https://ancestrylibrary.proquest.com"><strong>Ancestry Library Edition</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.findmypast.com.au"><strong>find my past Australiasia</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=6500121359"><strong>SAI Global onsite</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.pressreader.com"><strong>Press reader</strong></a></li>
	   </ul>	   
	</div>
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Login to these resources anywhere using your public library

Open in new window

…
0
3 Comments
Keep up with what's happening at Experts Exchange!
LVL 12
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Sign Up
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). 

<header>

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

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

</header>

Open in new window
0
1 Comment
I have a jsp page using struts tag as below:
<html:form action="/actions/graphics/job/attachFile/confirm">
<html:cancel value="Cancel" styleClass="buttons"></html:cancel>
<html:submit value="Confirm"/>
</html:form>

Open in new window

     
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		ActionForward actionForward = SessionChecking.checkUserBean(mapping, request);
		if (actionForward != null)
			return actionForward;

		if (isCancelled(request))
		{
                 //do something here
                }
               //......
     }//execute

Open in new window

it works very well in production for years, now I am trying to change the looking of the button by integrating with bootstrap.
When I only changed the looking of button confirm, it looks like this:
confirm_button_only.pngat this moment, both buttons are functioning.

however, when I tried to change the looking of both buttons, it looks like this:
confirm_cancel_both.png 
             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="submit" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>
		</html:form>

Open in new window

they both looks good, but the problem is both buttons are doing the same job, which means they both have the CONFIRM function , no more CANCEL function.

then I tried a little modification for experiment:
             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="button" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>
		</html:form>

Open in new window

the problem for this code is the CANCEL button does NOT work at all regardless how many time I click on it.

can anybody help me on this? all I want is just make the CANCEL button looks as big as the CONFIRM button but keep the original functioning.
I think the real question would be : how to transfer the value of CANCEL button to the HttpServletRequest such that the function isCancelled(request) can return true?
by name="cancel" ?  value="Cancel" ? or type="cancel"?
0
11 Comments
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?
0
0 Comments
Hello, I have an older contact form that was written using html table elements that I'm looking to re-code using CSS (specifically with the grid elements) so that it is responsive and mobile friendly.   Could someone help me out with the basic CSS / HTML frame work to accomplish the following?  I'd like the layout to be two columns in a larger display and one column in a mobile/smaller display, as follows:

Larger Display:
Field1 label   Field1 input      Field2 label  Field2 input
Field3 label   Field3 input      Field4 label  Field4 input
Field5 lable   Field5 input      Field6 label  Field6 input

                                 Submit (centered)

Medium Display:
Field1 label        Field2 label
Field1 input       Field2 input
Field3 label        Field4 label
Field3 input       Field4 input
Field5 label        Field6 label
Field5 input       Field6 input

         Submit (centered)

Small/Mobile Display
Field1 label Field1 input
Field2 label Field2 input
Field3 label Field3 input
Field4 label Field4 input
Field5 label Field5 input
Field6 label Field6 input

Submit (centered)
0
9 Comments
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>
    </asp:PlaceHolder>
		
    <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" />
</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference

Open in new window

…
0
2 Comments
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?
0
0 Comments
Hello,

For some reason, my ask-a-nurse image on mobile is not centered. It's the nurse image at the top of the page.

The buttons under it are centered on mobile, but the nurse picture isn't. Could you tell me how to center it and keep everything else the same on all devices?

www.idiaper.com

<div id="iconDiv-nurse" style="text-align:center">
<a id="nurseImg" href="http://www.idiaper.com/Ask-A-Nurse_ep_29.html"><img id="left-nurse1" alt="ask a nurse button" src="http://www.idiaper.com/assets/images/left-nurse2.jpg"></a><div id="nurseLinks">
  <a href="http://www.idiaper.com/womens-diapers"><img alt="for women button" src="http://www.idiaper.com/assets/images/women-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/Auto-Reorder_ep_43-1.html"><img alt="auto-reorder button button" src="http://www.idiaper.com/assets/images/auto-ship-nurse3.jpg"></a><a 
  href="http://www.idiaper.com/mens-diapers"><img alt="for men button" src="http://www.idiaper.com/assets/images/men-nurse.jpg"></a><a 
  href="http://www.idiaper.com/overnight-adult-diapers"><img alt="overnight products button" src="http://www.idiaper.com/assets/images/overnight-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-pullups"><img alt="pull ups button" src="http://www.idiaper.com/assets/images/pull-ups-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-cloth-diapers-briefs"><img alt="adult cloth diapers button" src="http://www.idiaper.com/assets/images/acd-nurse2.jpg"></a>

</div> 
</div>

Open in new window


#nurse-cat
{
float:left;
background-color:#3690cf;
color:#fff;
font-weight:normal;
padding:1%;
padding-right:2%;
}

#nurse-cat a,#nurse-cat a:hover, #nurse-cat a:visited
{
text-decoration:underline;
}

#nurse-cat a:hover
{
color:#9fa2a3;
}
#nurse-cat a:visited
{
color:#46c4ff;
}

#nurse-cat img
{
float:left;
margin-right:10px;
}


@media screen and (max-width: 600px){

#nurse-cat img
{
width:135px;
}

}

Open in new window
0
3 Comments
Please help with my JQuery click logic.
currently I can only hide the mobile menu when I click the menu button. I want it to hide when we click on any menu item or anywhere outside the menu as well. What I cannot figure out is how to hide the main menu in mobile mode but not desktop mode and not breaking the sub-menu function.
Code below is in 3 parts first JQuery, then CSS then HTML

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery);
body {
  margin: 0;
}

nav {
  float: right;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}

nav ul li

Open in new window

…
0
5 Comments
Trying to get this to look good on all devices. Please help.

Page: http://www.idiaper.com/depends-diapers

It's just the top blue box with the ask-a-nurse image in it. It looks bad when I resize the screen and also on tablet and mobile.

Need the font to be big all the time. We are dealing with older people:

Sometimes text-align:center has to be inline with our cart, btw.

Looking for html and css to copy and paste in, and if you want to explain your code so I can learn that would be great.

<div id="category11">
	<div id="ask-a-nurse-cat">
	<a href="http://www.idiaper.com/Ask-A-Nurse_ep_29.html"><img class="responsive-left" 				    	src="/assets/images/ask-a-nurse-cat2.gif">
	</a>
	</div>
	<div id="cat-top-right">
	  <h1 style="font-size:120%">Depends Diapers for Adults at iDiaper.com </h1>
	Below are Depends Diapers for men and women. There's some unique items in these 				categories like the Depend Adjustable Underwear (heavy) that's a pull up but it has tabs 	on the side for adjustment as well. 
	</div>
</div>

Open in new window


#category11
{background-color:#3690cf;
padding:5px 5px;
}

#category11 h1
{
color:#fff;
font-size:20px;
}

#category11 p
{
color:#fff;
}

#category11 p a, #category11 p a.visited
{
color:#0d3d5f;
text-decoration:underline;
}

#ask-a-nurse-cat
{
display: inline-block;
width:18.289%;
height:auto;
}
#ask-a-nurse-cat img
{
display: inline-block;
width:100%;
height:auto;
}
#cat-top-right
{
width:81.7%
height:auto;
text-align:left;
display: inline-block;
vertical-align:top;
padding-left:2%;
}


@media screen and (max-width: 600px){
#ask-a-nurse-cat
{
display:block;
max-width:171px;
padding-right:10px;
padding-bottom:10px;
}


#category11
{
font-weight:normal;
}

Open in new window
0
5 Comments
Get your problem seen by more experts
LVL 12
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Go Premium
Hello,

How do I get the buttons that are under the ask-a-nurse button on the attached screenshot (broken.png) to float left next to the nurse? Looking for 6 buttons to the right of the nurse.

Also, make sure it looks good on mobile.

Looking for html & css

<div id="nurseLinks">
<a href="http://www.idiaper.com/Ask-A-Nurse_ep_29.html"><img id="left-nurse1" alt="ask a nurse button" src="/assets/images/left-nurse2.jpg"></a>
<div id="iconDiv-nurse">
  <a href="http://www.idiaper.com/womens-diapers"><img alt="for women button" src="http://www.idiaper.com/assets/images/women-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/Auto-Reorder_ep_43-1.html"><img alt="auto-reorder button button" src="http://www.idiaper.com/assets/images/auto-ship-nurse3.jpg"></a><a 
  href="http://www.idiaper.com/mens-diapers"><img alt="for men button" src="http://www.idiaper.com/assets/images/men-nurse.jpg"></a><a 
  href="http://www.idiaper.com/overnight-adult-diapers"><img alt="overnight products button" src="http://www.idiaper.com/assets/images/overnight-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-pullups"><img alt="pull ups button" src="http://www.idiaper.com/assets/images/pull-ups-nurse2.jpg"></a><a 
  href="http://www.idiaper.com/adult-cloth-diapers-briefs"><img alt="adult cloth diapers button" src="http://www.idiaper.com/assets/images/acd-nurse2.jpg"></a>
</div>
</div>

Open in new window


#imgLinks-nurse {
text-align:center;
background-color:#3babdd;
}

#iconDiv-nurse {
padding-top: 0.8em;
float:left;
background-color:#59c8fd;
}

#left-nurse1
{
float:left;
width:29.2674%;
}

#iconDiv-nurse img{
width:23.2086%;
border:0;
margin-top:-5px;
flaot:left;
}

#iconDiv-nurse a{
border:0;
margin:0;
vertical-align:center;
}


@media screen and (max-width: 600px){
   #iconDiv-nurse img {width: 50.33%;}
   #leftnurse1 img {width: 100%;}
}

Open in new window

broken.png
0
12 Comments
Hello,

page: www.idiaper.com

I am serving something different to under 600px. Everything is working right now but the code is very bloated with a lot of unnecessary items. I'm going to first attach the code that is working that I'm using, then attach some code that Slick812 gave me that is a partial solution to the bloated code that you can use to complete the clean code. Hoping Slick812 can step in, anyone else is free to help.

Thanks.

My CSS and html:

#smallhomemenu
{
height:0px;
overflow:auto;
}

#home-menu
{
background:#3babdd;
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom
{
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom,#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
float:left;
padding:0px;
margin:0px;
background:transparent;
}

#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
max-height:155px;
max-width:133px;
overflow:hidden;
background-transparent;
}

#home-menu .top
{
margin-bottom:0px;
max-width:100%;
}

.bottom
{
margin-top:-5px;
max-width:100%;
background-color:#3babdd;
}

.holder-buttons-home
{
max-width:100%;
height:auto;
}

.holder-buttons-home div {
	width: 16.666666%;
	height:auto;
	background-color:#3babdd;
}

.holder-buttons-home div img {
	width:100%;
	max-height:133px;
}


@media screen and (max-width: 600px) {

Open in new window

…
0
6 Comments
I am using a new wordpress template called Smartline Lite by ThemeZee for this site:
http://plymouthpubliclibrary.net/

Does anyone know how to modify so that the brackets that appear on posts on the home page have more than [...]

I would like it to say something like [ read more]    I checked everyone and could not find how to modify this setting.
Here is a screenshot:

https://screencast.com/t/Qa7HfFZVW
0
10 Comments
Hello,

Can you tell me the code adjustments (both html and css) to get this:

www.idiaper.com (top row of buttons and blue box)
Note that it's an online store service so sometimes you have to hard-code text-align:center

1. Looking good on all devices
2. With the circles centered at all browser widths (right now they go to the left)
3. blue background on all devices and browser widths
4. anything else that needs adjustment.

Thanks.

<div id="home-menu" style="text-align:center;background-color:#3babdd;">
<div class="holder-buttons-home" style="text-align:center">
	<div class="top" style="float:left">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top.gif">
	</div>
			<br>
		<div class="top-4-guides" style="float:left">
		<a href="#top-4-guides"><img alt="top 4 guides button" src="/assets/images/top-4-guides.gif"></a>
		</div>
		<div class="shop-by-category" style="float:left">
		<a href="#shop-categories"><img alt="shop-by-category button" src="/assets/images/shop-by-category.gif"></a>
		</div>
		
		<div class="8-minute-video" style="float:left">
		<a href="#8-minute-video"><img alt="8-minute-video button" src="/assets/images/8-minute-video.gif"></a>
		</div>
		
		<div class="best-6-adult-diapers" style="float:left">
		<a href="#best-6"><img alt="best-6-adult-diapers button" src="/assets/images/best-6-adult-diapers.gif"></a>
		</div>
		
		<div class="faq" style="float:left">
		<a

Open in new window

…
0
10 Comments
Just pushed site live.  Noticed that the company logo in upper left "vibrates or flashes" when you mouse over it.  Not sure why that is.  Any idea how to correct?

http://endriesexpressinc.com
0
3 Comments
Hello

We would like to know if it is possible to modify our website which has been developed in ASP so that it becomes responsive, but especially by keeping the headers and footers in a fixed position.

Here is the original version of our website (not responsive) : http://www.ex0-sys.ch/

We have a test version of our site that is responsive, but we do not master the technique to maintain our original design.

Here the test version being modified (responsive) : http://94.103.101.201/Ex0.Web.Staging/

What technologies should we use because it seems to be a major problem for everyone?

Thank you in advance for your answers.

Regards,

RL
0
5 Comments

Responsive Web

962

Solutions

8

Content

i
The collection of articles, videos, and posts on this topic.

1K

Contributors

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.

Advertise Here
Top Experts In
Responsive Web
<
Monthly
>
Hall of FameAnnual Expert Awards
Advertise Here