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

I want a responsive 6-button interface. I get just a solid vertical line of buttons. To go on www.youthdiapers.com

<div id="homebuttons">
<img src="http://www.youthdiapers.com/assets/images/free-shipping10.gif"><br>
  <div id="six-buttons">
  <div id="bottomrow">
      <div id="auto-reorder"><a href="http://www.youthdiapers.com/Auto-Reorders_ep_41-1.html"><img src="http://www.youthdiapers.com/assets/images/auto-reorder10.gif" /></a></div>
      <div id="diapers-teens"><a href="http://www.youthdiapers.com/diapers-for-teenagers"><img src="http://www.youthdiapers.com/assets/images/diapers-teenagers10.gif" /></a></div>
      <div id="Youth-pull-ups"><a href="http://www.youthdiapers.com/youth-pullups"><img src="http://www.youthdiapers.com/assets/images/youth-pull-ups.gif" /></a></div>
      </div>
      <div id="bottomrow">
        <div id="youth-briefs"><a href="http://www.youthdiapers.com/youth-briefs"><img src="http://www.youthdiapers.com/assets/images/youth-briefs10.gif" /></a></div>
        <div id="reusables"><a href="http://www.youthdiapers.com/reusable-youth-diapers"><img src="http://www.youthdiapers.com/assets/images/reusables10.gif" /></a></div>
        <div id="bed-pads"><a href="http://www.youthdiapers.com/youth-bedpads"><img src="http://www.youthdiapers.com/assets/images/bedpads10.gif" /></a></div></div></div>

Open in new window


#homebuttons {
text-align:left;
max-width: 934px;
overflow:hidden;
}

#homebuttons a{ border: 0; }

#six-buttons {
display: inline-block;
width: 100%;
vertical-align: top;
float:left;
}


#auto-reorder {
display: inline-block;
vertical-align: top;
width: 33.333%;
float:left;
}


#diapers-teens {
display: inline-block;
vertical-align: top;
width:33.3333%;
float:left;
}

#youth-pull-ups {
display: inline-block;
vertical-align: top;
width: 33.3333%;
float:left;
}

#Youth-pull-ups {
vertical-align: top;
width: 33.33333%;
float:right;
}

#youth-briefs{
display: inline-block;
vertical-align: top;
width:33.333%;
float:right;
}

#reusables{
display: inline-block;
vertical-align: top;
width: 33.3333%;
float:right;
}

#bed-pads{
display: inline-block;
vertical-align: top;
width: 33.333%;
float:right;
}


#bottomrow
{
text-align:left;
float:left;
width:100%;
}


#auto-reorder img {
vertical-align: top;
width:100%;
}

#diapers-teens img{
vertical-align: top;
width: 100%;
float:left;
}

#youth-pull-ups img {
vertical-align: top;
width:100%;
}

#youth-briefs img{
vertical-align: top;
width: 100%;
float:left;
}

#reusables img{
vertical-align: top;
width:100%;
}
#bed-pads img{
vertical-align: top;
width:100%;
}

Open in new window

0
I have a responsive application developed with php, javascript and html.  This application run on amazon ec2 instance. Which software would be recommended to add the functionality of viewing images and  PDFs files?

best regards

CatOn
0
How do we responsively float right this video like an image is responsively floated right to the right of text? (The only video on this page, moving it down and to the right of the text below it).

I'll make the video a bit smaller.

www.idiaper.com
0
Trying to remove the "since 1950" from the right header area on smaller screen sizes.  This is from the Header Right widget in Studio Press' Metro Pro theme.  I added the below code but it doesn't seem to be removing the text "since 1950" from header.  

Beta site
http://36a.ed7.myftpupload.com

@media only screen and (max-width: 1024px) and (orientation: landscape)  {
  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {padding:5px;}
  .header-image .site-title a {margin:0; padding:0;}
  .header-image .site-title, .header-image .title-area {max-width: 400px; min-height: 119px;}
    .title-area {max-width: 900px;}
}


@media only screen and (max-width: 768px) and (orientation: portrait) {
  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block; }
  	.header-image .site-title a {margin:0; padding:0;max-width: 341px;}
  .site-header h1 { display:none;}
  	
}


@media only screen and (max-width: 480) and (orientation: landscape){  
	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block;}
  	.header-image .site-title a {margin:0; padding:0; max-width: 341px;}
  .site-header h1 { display:none;}
}


@media only screen and (max-width: 360) and (orientation: portrait){
    .site-header h1 { display:none;}
}


@media only screen and (max-width: 320px) and (orientation: portrait){
  .site-header h1 { display:none;}
}

Open in new window

0
Hello,

I am creating 2 responsive tables. I'm wondering how to totally spruce them up. I want them to look very, very different from these tables - http://www.idiaper.com/tranquility-premium-overnight-pull-ons - to where they don't look like the same tables at all. Not necessarily looking for you to write all the CSS, just looking for CSS ideas. Should look dramatically different than that link, not just different colors. Any help is appreciated. No javascript allowed, just CSS.

<div id="overall-product-description">
  <p><Description.
</p> 
   
  <p><strong>Measurements and Price</strong></p>
  <div id="product-meas-table">
    <table padding="5">
      <thead>
        <tr class="head-of-table">
          <th>Size</th>
          <th>Color</th>
          <th>Measurements</th>
          <th>Absorbency</th>
          <th>Package Info</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td>X-Small</td>
          <td>White</td>
          <td>17"-28"</td>
          <td>20.3 fl.oz.</td>
          <td>22 per pack or 88 per case</td>
        </tr>
        <tr>
          <td>Small</td>
          <td>White</td>
          <td>22"-36"</td>
          <td>20.3 fl.oz.</td>
          <td>20 per pack or 72 per case</td>
        </tr>
        <tr>
          <td>Medium</td>
          <td>White</td>
          <td>34"-48"</td>
          <td>34 fl.oz.</td>
          <td>18 per pack or 72 per case</td>
        </tr>
        <tr>
          <td>Large</td>
          <td

Open in new window

0
Hello,

We're using a prebuilt 3dcart.

Is this responsive table (sizing table on link below) set up correctly for all browsers and displays (especially IE)?

http://www.idiaper.com/attends-poly-briefs
0
Not sure why logo in upper left is getting cutoff on tablet in landscape.  The logo measures 341x119.  

Screenshot
http://screencast.com/t/yo0rS8pEK7a

Site
http://36a.ed7.myftpupload.com/

I added the below code

/*............. MEDIA QUERIES .................*/

@media only screen and (max-width: 1024px) and (orientation: landscape)  {
  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {padding:5px;}
  .header-image .site-title a {margin:0; padding:0;}
  .header-image .site-title, .header-image .title-area {
    max-width: 341px; /*width of logo*/
    min-height: 119px; /*height of logo*/
}
}


@media only screen and (max-width: 768px) and (orientation: portrait) {

  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block; }
  	.header-image .site-title a {margin:0; padding:0;max-width: 341px;}
  .site-header h1 { display:none;}
  	
}


@media only screen and (max-width: 480){
  
	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block;}

  	.header-image .site-title a {margin:0; padding:0; max-width: 341px;}
  .site-header h1 { display:none;}
}



@media only screen and (max-width: 320px) {
  .site-header h1 { display:none;}
}
  

Open in new window

0
https://www.custompatches.net/

All I want is for the quote form to no be shoved all the way to the bottom on smaller screen sizes. I want it to be right below the slider. But I want it to stay as is on desktop. Is this simple enough to do?
0
Is the Chrome plugin "Browserstack" the best tool to use to test/emulate different devices or is there a better tool?  Free is always good.
1
I need to develop a web application that also have to be installed in ios and android phones. I know some frameworks like ionic that can help with this task, so my question is:

¿Is possible to develope only one app that works in desktop and also can be packaged an installed in a smartphone?
¿wich frameworks do you suggest?

Regards
1
Hi,
We have been ruining a website in Classic ASP and MS SQL Server and now want make some mobile app. Please let me know which framework is best for us ? I did some search and found Kendo UI and Angular Js are better ?
Please let me know which one is best. Please also let me know any other  ? Thanks,
0
According to win 10 task master, I am receiving many bits by ethernet connection to the Internet ( and sending some). But no programs are running (lots of background processes) How can I find out where the activity originates.
0
Hi,

I am building a Careers / Jobs section on a client's website. They currently receive 30 CVs via email a day so they want to build a small 'Job Management' tool to facilitate this.

There will be 2 steps to each job application:

01 - complete form
02 - submit CV

Step 1 is fine, but they want users to upload their CV (pdf or doc) on their website. This is fine on desktop but mobile users will not be able to select their CV (pdf or doc) on their mobile, especially on iPhone.

I was thinking of providing them with the following options

01 - My CV is on Dropbox (and use their API)
02 - My CV is on Google Drive (and use their API)
03 - My CV is on my Computer (and auto email (from step 1) a token link to them... once they click the unique link they will land on a simple page that allows them to upload their CV which will be saved to their application.

I can't think of any other ideas... any suggestions would be greatly appreciated.
0
Hi all,

I have a classic asp webpage powered by mySQL that serves as a task management system.

I wonder if it is possible to create an app around it? The basic functionality should be based on the webpage, but I'd like this to happen:

1. On first use the user should choose which task management system they own (from a dropdown list)
2. On first use the app should prompt for password and then save the credebntials for next time.
3. The app should display a number depending on the amount of unsolved tasks on the webpage.
4. The app should notify the owner of the phone (the admin) if new tasks are entered.

Is this possible?

If yes - How would I go about this? I have no programming experience but I do see various app wrapping software on the web. I can do a bit of classic asp programming.

Best regards

Michael
0
I have existing pure CSS menu for the desktop which expands from left to right when hover.

HTML:

<nav id="nav">
  <a href="#nav" title="Show navigation"></a>
  <a href="#" title="Hide navigation"></a>
  <ul class="dropdown dropdown-vertical">
    <span class="clearfix">
        <li class="dir">ITEM 1
            <ul>
                <li class="dir">SUB ITEM 1
                    <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
                    </ul>
                </li>
                <li class="dir">SUB ITEM 2
                    <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="dir"><a href="">ITEM 2</a>
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li class="dir"><a href="/dev/tradeshows.htm">ITEM 3</a>
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li class="dir">ITEM 4
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li><a 

Open in new window

0
I am working out of Bootstrap and I want to prevent mobile users from being able to zoom in.

I have the following meta tag added
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
but they can still zoom in.
0
Greetings

I am trying to us Bootstrap with our CMS. Are there any techniques in Bootstrap that allows me to style a dynamically generate menu so that it behaves like one that has been hand coded.

I have tried using jQuery to add and remove classes with limited success.

Thanks



Here is some partial code on the menu structure and classes generated by our CMS:

<ul id="sectionMenuElementID_1" class="ipf-sectionmenu">
        <li id="pageid4949" data-pageid="4949" data-level="1">
          <div><a href="Item 1">Item 1</a></div>
        </li>
        <li id="pageid151" data-pageid="151" class="ipf-parent" data-level="1">
          <div><a href="Item 1">Item 1</a></div>
          <ul>
            <li id="pageid152" data-pageid="152" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid4869" data-pageid="4869" data-level="2"><a href="Item 1">Item 1</a></li>
          </ul>
        </li>
        <li id="pageid104" data-pageid="104" class="ipf-parent" data-level="1">
          <div><a href="Item 1">Item 1</a></div>
          <ul>
            <li id="pageid105" data-pageid="105" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid106" data-pageid="106" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid107" data-pageid="107" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid4965" data-pageid="4965" data-level="2"><a href="Item 1">Item 1</a></li>
            <li …
0
Client wants a navigation similar to http://www.lselectric.com (Services button) where a big drop down let's him display a ton of pages.  My programmer is running into issues getting around Javascript function of hiding and showing navigation.  Does anyone know of a plugin we can use?
0
I noticed some web developers used WordPress themes to build websites for their clients, is it good or not?
0
1. What are the best open source technologies for developing UI for website.
2. What should be used as open source for database can handle database scaling to 50-100 GB in 10 years.
0
I am new to responsive design and I am having two issues with the page below.

http://embroideredpatches.net/test/color_chart.html

1) In the " Most Popular / Frequently Used Thread Colors" section, once you scale the window size down to a certain point, the color swatch images completely disappear. It seems as though the size of the images is progressively scaling down.

2) In the "Complete Thread Color Chart" section there is a rather large gap between the charts and the text in the right side column.

I sense these questions will be a piece of cake for someone very well-versed in responsive markup.
Thanks a lot!
0
Hello all,
    I am having an issue with one of our new websites we have made. I have experience with PHP / HTML / MySQL, but this was from many years ago before responsive web / bootstrap and when development frameworks were just getting started, and my knowledge of CSS is fairly limited. Our site is made using the YII framework and a bootstrap theme. I know enough to make some basic edits to information, and even took something a 3rd party did to our site and emulated it to make a new page for a form that users can submit. I am not quite sure where or how to edit the site for the issue that I am having though.

    Looking at the "responsive.css" I found that you can edit the threshold in pixels of where it will switch from one "screen size preset" (for lack of knowing the actual term) to another with the following.

 
@media (min-width: 992px) and (max-width: 1199px)

Open in new window


Though I was told that editing those presets could / would mess with how it could end up looking on tablets or other typical mobile screen sizes, so my question is, what and where do I edit to fix the issue in the below image?

(Image is a gif, so you will probably have to click it to view the animation)
Example of navigation / image overlap
As you can see, when I shrink the browser, there is overlap of the "Shop All" button with the main logo before the site changes layouts. What is the best way to fix this? Is there a way to set the navigation to only move so far to the left to avoid that, or do I…
0
I'm trying to get some columns to fit on all devices (div columns).  I need something like this:

1 2
   3
   4

I would like 2,3 and 4 to wrap under 1 vertically when it is shown in a mobile browser.
0
Are there any really good online courses for Mobile App Development?
0
Hello;
I'm trying to convert a website to responsive and have watched several hours video on youtube ,now have these questions:

1-What is the principal of css for a container?

2-When we don't know the amount of a 'height' in css must we set it to 'auto'

3-When we use from html5 tags like 'footer' ,this tag act as a container?

4-What is best definition for mobile size for responsive(e.g min=320px  and max=600px)?

5-Can we put a rang of size for mobile in 'media query'?
for example :
@media only screen and(max-width:320px) and(max-width:600px)

6-When we reach to a breakpoint we can non-display a <div>,how can we replace another <div> to that <div>?

7-When we have a container and inside it have several <div> tag ,and reach to a breakpoint for responsive ,applying css to container for responsive is enough? or we must apply width to percentage for all nested <div> inside the container?

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
>