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
Why Diversity in Tech Matters
LVL 13
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

Read More
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 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
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
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
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
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
CompTIA Security+
LVL 13
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Learn More!
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
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
17 Comments
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
5 Comments
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
4 Comments
Learn Ruby Fundamentals
LVL 13
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Learn More!
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
2 Comments
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
5 Comments
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
4 Comments
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
2 Comments
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
3 Comments
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
26 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.

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