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

We've put together a small website related to the sale of our home. We would like to make it viewable on all devices. It seems to work fine when viewing it on a large screen but not on the individual devices. In particular, on my phone the header and menu don't stretch the entire width. Website is: mtviewhome.com. CSS is attached.
mtviewhome.css
0
Experts,

I am using the jQuery Mobile framework.

I have a 6 column table which does not have header row.

I need this table to convert into a singular column when viewed on a mobile device.

I've looked at the jQuery Mobile docs but, all of the examples I find use a header row which my table does not have.

Can this be done via jQuery Mobile or do I need to use some other syntax (HTML5)?

This should be the table layout when viewing on a desktop or larger size device.
<table width="100%">
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
<td>Title:</td>
<td><input type="text" id="title"></td>
<td>Position:</td>
<td><input type="text" id="position"></td>
</tr>
</table>

Open in new window


This is what I'd like the table to look like when viewed on a mobile device.
<table width="100%">
<tr>
<td>Name:</td>
</tr>
<tr>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Title:</td>
</tr>
<tr>
<td><input type="text" id="title"></td>
</tr>
<tr>
<td>Position:</td>
</tr>
<tr>
<td><input type="text" id="position"></td>
</tr>
</table>

Open in new window

0
Hello Experts,

I am building a responsive wordpress website where i have put logos of the clients (Logo Slider).

I want to achieve the following things with these logos -

1. I basically want to add 2 hyperlinks to each logo.
2. On the desktop website view (when the site is opened on the desktop or laptop), a click on the logo should take me to a page link.
3. On Mobile devices (when the site is opened in mobile device or a tab), a click on the same logo should take me to an external URL.

Is it possible to achieve? Appreciate your help in how to do this. Is there any plugin available or any code changes required?

Thank you for your help.

Best Regards
Raghav.
0
Hello;

I want to redesign a site for responsive and have 2 questions:

1-What is the standard size (min-max) for mobile,tablet,and desktop?please write the @media query for each one,my mean is only determine min and max for each device that cover also the
landscape
and
portrait
for mobile.

2-For a website with medium size  (php+mysql) that we want be responsive is it better that for each device we create one css file so 3 css files for website or one css file is ok that we put all 3 @media queries in that?

Thanks
0
My OS is win 10 pro 64 bit and sometimes I use Microsoft Edge or Google Chrome or Opera.  Sometimes when I go to a site using one of these browsers, the Usernames and/or password are already inserted, and all I have to do is to hit enter.  How do I change the settings in these browsers so that it does not store such information for any site(s) that I log into using the browser.  Thank u.
0
Hi everybody.
I'm writing a hybrid mobile app using Cordova/Phonegap and jQuery Mobile.
My client wants I add a button to the navbar to open a dropdown menu and I'm not getting it work right.
You can see an example page here: http://test.webintenerife.com/menutest/www/index.html

Currently I've set the position of the hidden ul for the menu to absolute but it is not shown even if the jquery code set its display property too 'block' as expected.
Another issue is that even setting its width to 100px or 200px, in mobile view the menu doesn't exceeds the parent li's width.

Any idea?
0
I want to use bootstrap to make form fields (i.e., input type="text") responsive.

When I use class="form-control" it makes the text field cover the whole width of the div. Obviously, I don;t want that. Look at rkassoc.org/Houston/form.htm. Specifically Remarks and "Serving Location".

How can I limit the width of these fields & retain responsiveness?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
<title>City of Houston Backflow Assembly & Test Report Form</title>
 <style>
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.wrapper{
  max-width:1100px;
min-width:600px;
  margin:0 auto;
  
}
</style> 
<script type="text/javascript">

</script>
<script>
  $(function() {
    $( "#datepickerid" ).datepicker();
  });
  $(function() {
    $( "#datepickerdc" 

Open in new window

0
Hi there. On our WordPress site, we are using the Theme My Login plugin. However on the login page, the logo and the login screen area needs to be centered on the page. Here is the url: https://drsearscoachportal.org/

I also would like to put a gray background color behind the login area too. Any ideas on this?
0
Hi there. On our WordPress site, we are using the Theme My Login plugin. However on the login page, the top menu bar is displaying over mobile which I don't want to display. Any idea on how to hide that on just the login page?

Here is the url: https://drsearscoachportal.org/
0
This can't be as difficult as it sometimes seems. Am doing a simple site for a friend to show their house for sale. Am having two problems:

1. The header image isn't resizing when screen is resized.
2. Want the menu and slide slow to butt up against each other.

There are 2 CSS files:
1.
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
*/

img, object, embed, video {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
      width:100%;
}

html, body {
      margin:0;
      padding:0;
      height:100%;
}
}

/*
      Dreamweaver Fluid Grid Properties
      ----------------------------------
      dw-num-cols-mobile:            5;
      dw-num-cols-tablet:            9;
      dw-num-cols-desktop:      16;
      dw-gutter-percentage:      15;
      
      Inspiration from "Responsive Web Design" by Ethan Marcotte
      http://www.alistapart.com/articles/responsive-web-design
      
      and Golden Grid System by Joni Korpi
      http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
      margin-left: 0;
      margin-right: 0;
      width: 100%
 /* padding-left: 1.3043%;
      padding-right: 1.3043%; */
}

#header {
      clear: both;
      position: absolute;
      float: left;
      /*margin-left: 0;*/
      width: 100%;
      height: 14.5%;
      z-index: 200;
      display: block;
}
      
#mainMenu {
      clear: …
0
I am used to m1. Attempting to recreate an existing site. Would like to add images as links to the header under the search box. Modifying luma template/theme.

Thanks
0
http://www.custompatches.net/test/index3.html

I have what I think is a simple question. At smaller sizes, the quote form falls underneath the slider, which I want, but it refuses to span the width of the page, and I can't figure out why
0
I need a way to formulate a page of URLs for my team as follows:

Assistance with the below is greatly appreciated.

Expand and collapse each section

- Add new URL button allows for URL and brief description.
- Search button searches all URLs and descriptions.

URLs                                         BRIEF DESCRIPTION OF SECTION
                                                  BRIEF DESCRIPTION OF URLS
+/-url.com
         url.com/page1
         url.com/page2
         url.com/page3

+/-url2.com
         url2.com/page1
         url2.com/page2
         url2.com/page3
0
Hello:

We are preparing to try out a Web Reporting program.  We were just informed that since we have Citrix Servers the service must use cookie surrogates for our Citrix Users, to help differentiate between the different users on the Citrix devices.

We can configure the web reporting to only use cookie surrogates from the Citrix Servers and to use something else fro our other users; but, i was told that there will be latency up to 100 milliseconds for every user that is using Citrix.  In the past some users have stated that any disruption in their work flow causes them to not be able to work at all.  Some users are more high-maintenance than others.

My question is, is there a way to tell what 100 milliseconds of latency for every internet session will look like before we turn this web reporting tool on?  

There will be a lot of work involved with setting this up and a lot of work with tearing this down if the users do not like it.  Even if I only have a focus group use testing out this new web reporting system, I will still need to make the configuration changes regardless.  Again my question ism, is there a way to tell how long 100 milliseconds will be before we actually try this out?
0
How do I resize the logo so it fits better on mobile devices?  Or, is there a way to put a smaller (not as wide) image on mobile devices?
http://4d9.f48.myftpupload.com/
0
http://www.custompatches.net/test/index3.html

I want the quote form to be underneath the slider, instead of to the right, once the screen size is smaller than 768. Putting a float:none; on the div at the smaller media queries didn't work. Not sure what else to try. I'm hardly an expert at responsive css.
0
http://www.custompatches.net/test/index3.html

When I resize the browser window down just enough so that the design does its first adjustment, the blue box saying "Get Quote Now" goes in the wrong place. I need it to stay to the right of the top nav, exactly like it does at full size. I cannot figure out what is causing this problem, whether its the actual .quote-title div or if somehow the top nav div is causing it.
0
For the new website, the organization would like a header that includes 5 social media buttons (Facebook, Twitter, Instagram, YouTube and Flickr) and a translate bar and a search bar. We are currently using all of these, but they do not work on a responsive site. I tried RRSSB (Ridiculously Responsive Social Sharing Buttons) but couldn't get them to work and they don't come in the small square size needed. At this point, I have no idea how to deal with the Google bars. Need a search bar like yours below.

Based on research, I've added this to the CSS:
img, object, embed, video {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
      width:100%;
}

Should width: 100% be added to the main CSS? Have tried applying it to the button container, but I've had no success making them responsive. Looking for some suggestions on how to solve this.
0
I am helping a client build email templates for their school mass mailing system. They use a service called "School Messenger" which provides some out of the box templates but they are NOT responsive.

Moreover, the UI provides an editor in which to add the basic content of the email including HTML but the head /head is unavailable. As such, it strips anything that I might try to insert thet resembles a meta tag.

Two main questions; one, can the responsive "viewport" tag be forced into the body and read and parsed by various readers and two, is there any means of bypassing code stripping? i.e. surrounding code with tags like {literal}{/literal}, that sort of thing.

Basically, I need to hack my way into what will be a fully responsive email template wihtout access to the head of the html framework.  Any suggestions or hacks would be appreciated.
0
I assume the effect here http://mylife.adpts.com/#/ is achieved through somehow scrolling animated gifs. Is that correct? How can I get this effect (the one that looks like background video, etc...)
0
Context
We are building an offline web app that uses indexedDb for storage of data on the client side. Data will be stored offline and when there is network it will sync this data to a server.

Problem
We are using AES to encrypt the data in the indexedDb but we are not sure how to manage the encryption key on the client side. There seems to be no way to maintain an encryption key in javascript without it being available to anyone that can use dev tools. We cannot rely on the server since the app might not be able to connect to the server for weeks.

Does anyone have any ideas as to how we can securely manage this encryption key on the client side?
0
HI,
I have the a web page which looks like :
Screen-Shot-2016-06-04-at-2.24.47-PM.pngwhen i open it in mobile mode in chrome this is how it looks like :
Screen-Shot-2016-06-04-at-2.27.44-PM.pngNotice how the bottom part is getting displayed in a wrong way.
The same also happens when i just shrink the firefox or chromw window. How do i make it appear properly in mobile ?
Here is the jar of the project. you can just run it using : java -jar yatra-notes.jar
http://wikisend.com/download/359664/yatra-notes.jar
and open localhost:8080/yatra-notes in browser to open the page.
For reference here is the source code too :
http://wikisend.com/download/372708/yatra-notes.zip
but to run it you need to compile it using mvn clean package
and then the jar will be generated.

Thanks
0
I accidentally deleted the Index.php file in the Httpdocs/ folder. Is this what is causing the Forbidden error? How do I get it back to make my webpage work? I have no backup and I cannot find Trash folder on File Manager. I use Plesk for hosting.
Capture.JPG
0
I have a page with an iframe that displays correctly in desktop browsers but does not display on my iPhone or iPad, and I can't tell why this is.  Can anyone tell me why the iframed content is not displaying in mobile browsers and how I can get it to do so?

https://www.insuranceforstudents.com/insurance-plans/short-term-plans/hcc-instant-quote

Thanks!

Regards,
Jon
0
Hi,

I use online services like google docs quite heavily, and would use wix.com if I can get the performance to improve.

1. How can I tell if the performance I'm receiving is at or near the maximum attainable?
2. How can I identify a bottleneck if there is one?

eg I could try various combinations of different PCs and different internet connections, but is there any analytical way to find out?

I use windows 10, windows xp, ipad, and android devices, so can run diagnostics on any of these.

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