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.

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

Sign up to Post

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
Free Tool: ZipGrep
LVL 12
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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
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
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
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
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
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
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
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
On a tablet, IN BLACK FOOTER by the bottom navigation, the phone number appears.  It isn't supposed to show up there.  It isn't in the widget.  It does not show up on desktop.  Wondering how/why it is there since the footer bottom navigation is displayed by going to appearances/menus.  I do not have anything that calls for a phone number.
0
Free Tool: Site Down Detector
LVL 12
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Why is there a DOUBLE underline on phone number at bottom of page?  

See screenshot
https://screencast.com/t/Jf41U7LUxR

live site:
https://screencast.com/t/Jf41U7LUxR
0
Hoping someone can help me with a CSS fix. I have a dropdown that displays behind the body content (see attached).

If you enter "9" in the second input field, you'll see a dropdown of suggestions, but that dropdown is displaying behind the content underneath it. I've tried changing the z-index but it isn't working. Any help would be appreciated.

Here's the link to view:  http://173.230.154.241/services

Sample
0
Hoping someone can help me with a CSS fix. I have 2 issues:
  1. I cannot get the second input field to line up with the first one (see attached)
  2. The dropdown shows behind the body content (see attached).

Any help would be appreciated. Here's the link to view:  http://173.230.154.241/services

Shifted Input fieldsDropdown hidden
0
The right sidebar wraps below the main body copy on smaller screens.  When it does, there is a large gap between the sidebar (which is now at the bottom of the screen) and the main body copy.  How do I reduce that gap?

screen shot
https://screencast.com/t/KQreV5yA5A

beta page
http://e98.417.myftpupload.com/rad-structures-services/
0
Why don't the images resize nicely in this two column layout?  When you resize to a smaller viewport, the images get super tiny.  My goal is to have the image display full width above the descriptive text on smaller screens.

beta site
http://e98.417.myftpupload.com/rad-structures-services/

screen shot
https://screencast.com/t/lqcTENf2

Here is code to two column layout
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
	float: left;
	margin-left: 2.564102564102564%;
}

.one-half,
.three-sixths,
.two-fourths {
	width: 48.717948717948715%;
}

.one-third,
.two-sixths {
	width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
	width: 65.81196581196582%;
}

.one-fourth {
	width: 23.076923076923077%;
}

.three-fourths {
	width: 74.35897435897436%;
}

.one-sixth {
	width: 14.52991452991453%;
}

.five-sixths {
	width: 82.90598290598291%;
}

.first {
	clear: both;
	margin-left: 0;
}

Open in new window

0
Why does the sidebar font size change to a smaller size for the Header 2 widget?  I initially had a Header 3 in the sidebar as the last widget and that widget had a smaller font size and Header 2 looked good.  Then when I removed Header 3 widget, which made Header 2 widget the last one - then Header 2 displayed a smaller font!

Beta site
http://e98.417.myftpupload.com/rad-structures-services/

Screen shot
https://screencast.com/t/RCMCAeXF
0
We recently replaced the middle image logo (which display on all pages but home page) with code for a logo provided by the company that ranked this site.  After doing that, we noticed that the logos are no longer evenly spaced.  See screen shot below:

Site
https://rochesterinn.com/rochester-inn-room-amenities/

Screen shot
https://screencast.com/t/6JeQKW8xVA

I tried using inspector to fix but when I did and you resized site for a phone, then the left and right logo got super tiny.

Here is code provided for middle logo:
<div id="hc-ratingRatingHotel">
<div id="hc-ratingRatingHotel__inner"><img id="hc-ratingRatingHotel__ribbon" src="https://media.datahc.com/ratinghotel/stellar2/ribbon.png" />
<span id="hc-ratingRatingHotel__year">2017</span>
<span id="hc-ratingRatingHotel__award">RECOGNITION OF EXCELLENCE</span>
<div id="hc-ratingRatingHotel__hotelink"><a id="hc-ratingRatingHotel__hotelname" target="_blank"></a>The Rochester Inn</div>
<a id="hc-ratingRatingHotel__hclink" href="https://www.hotelscombined.com/" target="_blank" rel="noopener">HotelsCombined</a>

</div>
<div id="hc-ratingRatingHotel__rating"><span id="hc-ratingRatingHotel__number">9.4</span>
<span id="hc-ratingRatingHotel__pipe"></span> <span id="hc-ratingRatingHotel__ratedby">Rated by Guests</span></div>
</div>
<div id="hc-data__hotellink" style="display: none;">The_Rochester_Inn</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"> </script> 

Open in new window

0
I am trying to integrate my coldfusion pages into  a 'responsive'  navigational bar (eg bootstrap template from W3schools). Below is the result of my efforts in trying to use one of these templates.   The  page code I created is below and also a link to the server so you can see the result.

The result suggests that the template I am using does not fully support coldfusion OR I am not using the correct approach in building in the coldfusion pointers to the nav template.

I am asking the following questions

-  Am I doing something stupid in the example I have included - if so, can you give me a pointer as to what the solution is
-  What are your recommendations for building a responsive Nav bar which will support coldfusion.


Many thanks,

james





<title>Untitled Document</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>

<body>
<div class="container background">
  <div class="row">

    <h1>ABAC INSCRIPTION 2019</h1>
<nav class="navbar navbar-inverse">
    <div class="container-fluid ">
      <ul class="nav navbar-nav">
        
        <li><a href="#tab2" data-toggle="tab">Programme 

Open in new window

0
Hello,

How do we responsively center these category buttons on all devices?

It's the shop by category buttons on this page:  http://www.usamedicalgloves.com

<div id="shop-by-category-home">
  <div class="header-home-categories">Shop By Category</div></div>
<div class="buttons-home">
  <div class="category-home"><a href="http://www.usamedicalgloves.com/disposable-nitrile-gloves.html"><img src="/assets/images/nitrile-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/latex-gloves"><img src="/assets/images/latex-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/vinyl-gloves"><img src="/assets/images/vinyl-gloves.jpg" /></a></div>
  <div class="category-home"><a href="/medical-gloves"><img src="/assets/images/medical.jpg" /></a></div>
  <div class="category-home"><a href="/latex-free-gloves"><img src="/assets/images/latex-free.jpg" /></a></div>
  <div class="category-home"><a href="/powdered-gloves"><img src="/assets/images/powdered.jpg" /></a></div>
  <div class="category-home"><a href="http://www.usamedicalgloves.com/synthetic-gloves"><img src="/assets/images/synthetic.jpg" /></a></div>
  <div class="category-home"><a href="/sterile-gloves"><img src="/assets/images/sterile.jpg" /></a></div>
  <div class="category-home"><a href="/cheap-disposable-gloves"><img src="/assets/images/cheap.jpg" /></a></div>
  <div class="category-home"><a href="/lab-gloves"><img src="/assets/images/lab.jpg" /></a><a></a></div>
  <div class="category-home"><a

Open in new window

0
Free Tool: SSL Checker
LVL 12
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Beta site
http://25a.e58.myftpupload.com/

Is there an easy way to change phone "link" color on mobile devices?  

On this page, http://25a.e58.myftpupload.com/ on a phone, the green box above the map (lower down the page) has a phone number that changes to lime green on phones.  It is very difficult  to read since the box it is in is also green.  I realize it probably changes to lime green because that is the color of regular links on this site.  How do I use css to tell JUST THE PHONE NUMBER to NOT turn lime green?  Ideally, client wants number to remain which with an underline.

Here is screenshot (not from a phone though) which shows you the location of the phone number in question that should be modified.
https://screencast.com/t/WQDxVbKS
0
Hi Experts

I'm starting a small data application, and in order to keep it simple, I decided to use only 2 breakpoints:

  • Mobile:
  • Portrait tablets and lower (cell phones)
  • Desktop:
  • Landscape tablets and higher (laptops, desktops)

Based on this, how do I write my media queries?

Thank you.
0
http://25a.e58.myftpupload.com/

Client likes how the "Learn More" buttons on home page below circle icons have a green mouseover effect.  

We duplicated this button for the Careers page and modified the css so is sits flush left.  We had to rename the button on the careers page from .entry-content a.more-link to .entry-content a.jobs-link.  Now the mouseover color change to green doesn't work.  I can't figure out how the original buttons on the home page are calling for a green mouseover since that stylization came with the theme.

Careers "Current Openings" button:
.entry-content a.jobs-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin-top: 20px;
    margin-bottom: 26px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    width: 130px;
}

Open in new window


Home page "Learn More" button
.entry-content a.more-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin: 20px auto 26px !important;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    width: 100px;
}

Open in new window

0
When you click on the Locations button (http://25a.e58.myftpupload.com/cloverleaf-locations/) and select a location (i.e. CCS Sioux City Plant 1), the crumb trail does NOT include the fact that you clicked on the Locations button and THEN clicked on a specific location.  

I am guessing that this might be happening since the locations page is actually a chart.  Hoping there is a workaround.

I am using Studio Press.

Here is screenshot of how I think the crumbs should be displayed: https://screencast.com/t/wAKesTWh7Q
Here is screenshot of the breadcrumbs dashboard so you can see I have checked everything: https://screencast.com/t/vZOLV8tE

I found this link but I don't think it helped any.
http://rickrduncan.com/pro/wordpress/genesis/customize-genesis-breadcrumb
0
Client wants 3 footer widgets outlined in red to lineup ontop of each other not to  the right of each other on very small screens.  How do I do that?

beta site
http://25a.e58.myftpupload.com

screenshot
https://screencast.com/t/WqG7eJnFPTZ
0
On this site's home page there are 3 learn more buttons below the circle icons lower down the page.
http://25a.e58.myftpupload.com/test/

Client wants this same type of button on the Careers page.  I put the button in place and am now working on the css.
http://25a.e58.myftpupload.com/cloverleaf-careers/

She wants the button to float to the left so it is lined up with left margin.  See screen shot
https://screencast.com/t/5UlUckbnzW

I copied the css from the home page button and put the text align to the left for the careeers button but it doesn't move.  Not sure what I am doing wrong.

Original button code
.entry-content a.more-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin: 20px auto 26px !important;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    width: 100px;
}

Open in new window



New button code for careers page
/*.... Careers page jobs button ....*/
.entry-content a.jobs-link {
    background-color: #5a5853;
    border: 1px solid #ddd;
    color: #fff;
    clear: both;
    display: block;
    margin: 20px auto 26px !important;
    padding: 5px;
[b]    text-align: left;[/b]
    text-decoration: none;
    border-radius: 8px;
    width: 100px;
}

Open in new window

0

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
<
Monthly
>