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

Hi

I have a modal popup that gets opened:

oWnd.maximize();
oWnd.set_modal(true);

This works ok and takes up the full screen over the current page, its used for adding / removing items on the main page.

I need to retain this look for mobile devices, but on a pc screen I'd like to set a max width, of at least about 786 (tablet). The pages do use Bootstrap, so those classes are available

Can anyone help?

Andy
0
Hello Experts,

I have the following code below that I could use some help with. The code below works fine with the hamburger icon on the left side. However, if I try to float the "hamburger" icon to the right the links below once you click on the hamburger icon do not drop down as they do when the hamburger icon is on the left in the original posted code. Also, the code below is a CSS Responsive Navigation without jS or jQuery.

<nav>
            <input type="checkbox" id="button">
            <label for="button"></label>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul> 
        </nav>

Open in new window



/
****************************************************************************
Navigation Styles 
****************************************************************************/

nav {
    width             : 100%;
    background-color  : $nav-bg;
    font-weight       : $font-weight--bold;
    
    input[type=checkbox] {
        position  : absolute;
        top       : -9999px;
        right      : -9999px;
    }
    
    label {
        display            : none;
        cursor             : pointer;
        background-image   : url("../img/nav.svg");
        background-repeat  : no-repeat;
    }
}
    
@include mq(sm) {
    nav {
        ul {
            display  : none;
            margin

Open in new window

0
On my site here, denverwinecellar.com, when viewed over mobile, the top bordered box should be centered. Here is the current css on that box:

@media only screen and (max-width: 480px) {
#top-elements .phone-number-padding {
  display:block;
  border: 1px solid;
  padding: 0 10px 0;
width: 250px;
	text-align: center;
	
}
}

Open in new window


What would I add in to center that?
0
How to add a password requirement to enter my webpage using HTML or PHP?  Other application to use?
0
I'd like to get advice about what development environment to use to develop a web data entry application. I have over 40 years of programming experience, but have never developed for the web. This is likely the only application that I'm going to develop. I had one suggestion to use Apache/PHP/MySQL, which seems reasonable. But recently read about other solutions than MAMP (I use a Mac). Is it useful to also use something like Wordpress?

Thank you
0
I work with classic asp and I am designing a new site.  I want to ensure that I put the site together "correctly" in terms of page lay-out and <head></head> contents and structure.  I plan on using AJAX, JSON, CSS, JavaScript and Bootstrap.  I would like to place my styles and most <head></head> contents in an include for the purpose of code reuse.  I would love to hear suggestions on what best practices are with this.  I have been programming along these lines for about 15 years now but I am concerned that I have a lot of bad habits and I want this done right.
0
Hi,

Slick812 does an awesome job at helping me with responsive div designs.

I'd like to ask a question to him: What are good tools/articles to use to make my divs and calculate my percentages like you do?

Thanks!
0
I would like to create shortcuts on my iPhone screen which, when clicked, open a particular web page.
0
Hi everybody.
I'm working an hybrid app using jQuery Mobile. The app connect to the php code to get/post data.
I'm wondering how to keep user logged in even when the app is not active so we can send notifications (like native apps such as Facebook or WhatsApp).
Thank you for any suggestion
0
I need to monitor a single users web activity for my manager. Do you know of any simple programs to monitor web activity on a single user that will show visited sites and web usage?
0
I am using Bootstrap in my .Net page and have an email field where I have the following validators:
1. Email required validator
2. Email format validator

But somehow the validation messages do not show up in the same place.
There is a blank space before the second validation message.
Its like the validator is adding a blank space.

But this does not happen with .Net code without bootstrap, where the first validation message available is shown in the first available space.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Any ideas on how to fix this in Bootstrap?
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                <div class="row">
                    <div class="col label col-xs-12 col-sm-3 col-md-3 col-lg-3 textLabelAlign">
                        <asp:Label ID="lblEmail" runat="server" Text="Email "/>
                        <asp:Label ID="lblEmailRequired" runat="server" Text="*" rel="required" />
                    </div>
                    <div class="col field col-xs-12 col-sm-6 col-md-6 col-lg-6 textBoxAlign">
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="txtEmail" Width="100%" EmptyMessage="Enter Email" TabIndex="14" MaxLength="128" …
0
Hello,

I'm trying to make my banner mobile responsive.

Attached is the banner.

I've sliced it into 7 images, I don't think I did my slices with the same heights but other than that it is a start.

Here's my html so far:

<div class="buttonscontainer">
	<div class="blog1">
		<a href="http://www.adultclothdiapers.org/reusable-adult-diapers-s/106.htm"><img src="/v/vspfiles/assets/images/blog.jpg"/></a>
	</div>
	<div class="6buttons">
		<div class="toprow">
			<a href="http://www.adultclothdiapers.org/reusable-adult-diapers-s/106.htm"><img src="/v/vspfiles/assets/images/acd1.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/reusable-adult-swim-diapers-s/108.htm"><img src="/v/vspfiles/assets/images/swim2.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/mens-washable-underwear-s/109.htm"><img src="/v/vspfiles/assets/images/mens3.jpg"/></a>
		</div>
		<div class="bottomrow">
			<a href="http://www.adultclothdiapers.org/womens-incontinence-panties-s/100.htm"><img src="/v/vspfiles/assets/images/womens4.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/adult-diaper-covers-s/110.htm"><img src="/v/vspfiles/assets/images/covers5.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/underpads-and-sheets-s/111.htm"><img src="/v/vspfiles/assets/images/pads6.jpg"/></a>
		</div>
	</div>
</div>

Open in new window


Here's my CSS so far:

.buttonscontainer
{
float:left;
text-align:left;
width:1140px;
height:320px;
}

.blog1
{
width:501px;
height:320px;
float:left;
}

.6buttons
{
width:639px;
height:320px;
float:left;
}

.toprow
{
width:639px;
height:158px;
float:left;
}

.toprow img
{
float:left;
}

.bottomrow
{
width:639px;
height:162px;
float:left;
}

.bottomrow img
{
float:left;
}

Open in new window

banner-April22-2016.png
0
I've created a demo as in this fiddle.

The code is also pasted below for your convenience.

var generateTrend = function() {
  $("#chart").kendoChart({
    xAxis: {
      labels: {
        template: "#:kendo.toString(value,'dd/MM/yyyy hh:mm:ss')"
      },
      title: {
        text: "Time"
      }
    },
    series: [{
      type: "line",
      field: "value",
      categoryField: "date",
      "data": [{
          date: new Date(2013, 0, 1, 1, 1, 0),
          value: 3
        },

        {
          date: new Date(2013, 0, 1, 1, 2, 0),
          value: 4
        }, {
          date: new Date(2013, 0, 1, 1, 3, 0),
          value: 5
        },

        {
          date: new Date(2013, 0, 1, 1, 4, 0),
          value: 7
        },
      ]
    }]
  });
};
generateTrend();

Open in new window


But currently the label on the x-axis is in the format of "hh:mm". However, what I need is "hh:mm:ss". Although I tried
template: "#:kendo.toString(value,'dd/MM/yyyy hh:mm:ss')"

Open in new window

in the code, it does't seem to work.

Would you please let me know the right way of doing this?
0
Hopefully a quick question:
If I add the two lines of code in the link shown here, will that make my HTML page mobile responsive?
https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design#tldr
0
I'm creating a form with multiple sections using Bootstrap.  The end result should look similar to this:

Goal
I am having an issue where resizing the form is causing the labels and fields to collide in my horizontal form as below:

Screenshots
I've stripped down some code  to illustrate the issue:
https://jsfiddle.net/scotie/rbf8n8p2/
0
We have a template from Microsoft that they call a "Webpage Template".  It is a link in OneDrive that has text, links, and pictures in it.  We've been asked to "add the template to our website", which is in WordPress.  If this were an HTML file, no problem.  If I convert to HTML, the page doesn't look the same, and the pics don't show up.  Since the link is presumably designed to be inserted into a website, I have to assume I'm making it harder than it needs to be.  Suggestions?
0
I need to create about 500 users for our web application. I will also need their person id that system assigns them when I create them which is a number that appears in the URL after creating it.  What tool/script do I need to use to do this?  I was thinking about Selenium webdriver but not sure if the HTMLunitdriver will capture that number from the URL.

Please suggest.

Thank you
0
Hello Experts,

I have a wordpress website and i want to show other mobile websites in a mobile viewer.

I have seen few websites with a simulated picture of mobile phone (iPhone, Samsung) and you can see a real website on the mobile screen.

I am not sure what it is called. I searched a lot but didn't find any solution. Your help is highly appreciated.

Thank you in advance.

Best Regards
Raghav.
0
Our Company is intent to build the business for Web Hosting ,we would like to bring over all the existing customer which are have simple web site and hosting in another place.My management said will provide one VM to host different company domain and website in one server .May i know is that posible ? or have another way to do it.
0
I have a simple HTML text web site and would like to know who visited my site.
How can I record the IP addresses and other information about who's clicking?
I read that this information is already being recorded.  Where do I find it?  Some sort of log?
0
Hello,

Is it possible to load videos on my web app (without playing them) then if I loose my internet connection I can play them from a kind of cache in the browser?
0
How do I add code to javascript which will make every input box expand to a size so that the contents is readable and then contract
to the original bootstrap-driven size after leaving the input box.

10 second video:
http://www.screencast.com/t/yQnPFkA6vr
0
Hi,

I have a website that i would like to convert to website responsive.

The website is built with html and css (a little of javascript).

I want to convert it to website responsive so that it can be accessed on other devices (ie: tablets, phones, etc).

I know bootstrap can do this.

Can someone guide me in the right directions and suggest some ways for me?

Regards,
Bakaka
0
Please look at www.autowaterinc.com. The main page photo rotation is done in Flash, which of course is NOT supported by Safari.

I'm looking for a responsive slider I can use in place of this, free is best, but maybe I can pay a little.

Note this is NOT WordPress.

Thanks
0
Hello,  can you recommend a good document to improve my knowledge about responsive design?

Currently having several issues, mostly on Safari and Mac OK desktop/mobile devices
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
>