Go Premium for a chance to win a PS4. Enter to Win

x

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 have a responsive handburger menu on this site: http://taliance.com
Its a wordpress site running Genesis Theme Framework with a child theme.

You need to scroll down 150px to see the menu, and set your dev console to look at it as a mobile.

It nearly works how we want it, but it doesn't slide back to the left when an item is clicked.
Normally this needn't be a problem. It was designed for linking to other pages. But this menu's links go to ids on the same page, using the PageScroll2id plugin. So, as you'll see, it remains in place.

Can you tell from the dev console what I need to do, either with js/jquery or with css to make it slide away when an item is clicked?

Thank you
0
Free Tool: Path Explorer
LVL 11
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Navigation extends full width of nav bar in  Chrome  but not in Firefox.  How do I modify navigation so it extends full length for all browsers?  I have modified the css but when I make it work in one browser it fails in the other.

Chrome screenshot
https://screencast.com/t/ClkmvqYqmH

Firefox screenshot
https://screencast.com/t/Q6n7svVyp

Beta site
http://pl.triolibraries.com/

.main-navigation-menu a {
    display: block;
  padding: 14px 1.9em;}
  
#navi-wrap {
    border-top: 0px solid #004488;
    border-bottom: 0px solid #004488;
}
  
.main-navigation-menu li:last-child { border: none; }

Open in new window

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
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
I had this question after viewing How to redirect after a user shares something one facebook.
Hi, I am a man in the street who knows nothing about coding……Please help, My aim is that when FB visitors click on this link on my post: https://www.facebook.com/sharer/sharer.php?u=https://goo.gl/nsbpk5
It will obviously take them to share dialogue, and when they click share, I need them to be redirected (URL Redirection or dialog/feed) to this one: https://goo.gl/HSo5rf    this one has to pop up. So how do I join these hyperlinks to make one?
I tried this: https://www.facebook.com/sharer/sharer.php?u=https://goo.gl/nsbpk5&redirect_uri=https://goo.gl/HSo5rf
 but it gives me a this blank page after clicking SHARE: https://www.facebook.com/dialog/return/close#_=_
In short this should  be a full page display, shown within Facebook.com.
and a popup page should be compatible to Mobile web apps as well.
Where did I go wrong???????
0
Concerto Cloud for Software Providers & ISVs
LVL 5
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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
Client wants to have "Dedicated to Service Since 1952" to appear at  the very bottom of the site with a dark green background.  This theme does not have a bottom footer widget.  The closest I could do was to stylize the h6 tag but this isn't working too good either.  Any ideas?

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

screen shot
https://screencast.com/t/As2cBJy087
0
Hi,

I've been building a website from a tutorial I'd followed. The tutorial was initially for bs v4 alpha but since bs beta was launched I've made changes so it now seems to work for v4 beta.

The tutorial, as I understood it, was creating a website for larger screens and using the code
 @media(max-width:768px)

Open in new window

to specify any changes to the divs or sections IDs to be applied on screens smaller than 768  - i.e. phones and smaller tablets.

However, I've tried to make some more changes to my divs using the
@media(max-width:768px

Open in new window

command line but they appear not to be working when I minimize my browser to phone size. I wonder if this is because, as I read, small size resolution - i.e. for phones is the default, so the max width query is perhaps being over-written?

If I am using bootstrap v4 beta do I have to redo the site so the @media(max-width:768px is effectively the default and I'd need to make changes using (min-width: 576px / 768px) so things look different on the medium larger screens? ALternatively is there a way at the beginning to tell bootstrap that the 'default' is 768px and upwards....Hope this makes sense...Bit confused...Thanks
0
Want to switch off some HTML-Code via CSS:
HTML
      <div class="display-breaks">
      <p> </p>
      <p> </p>
      </div>

Open in new window

CSS
.display-breaks { display: none !important; }

Open in new window

The display:none has no impact on the iPhone  display with Safari, but works on the iPhone with Firefox. Any idea why?
0
Trying to get hamburger menu to display on TABLET in LANDSCAPE view.  I modified the code below but it doesn't seem to make any difference. The hamburger menu DOES display on tablet in portrait view.

/* .......MEDIA SCREENS........... */

@media only screen and (max-width: 1300px) {
.content {
    float: none;
}
}

Open in new window

0
http://25a.e58.myftpupload.com/meat-packaging-processing/

Can't figure out why site text is not responsive.  The photos seem to be responsive as they stack up at the bottom of the page below the text on smaller screens. Am at my wits end.  Any help would be appreciated.

screenshot
https://screencast.com/t/SAMkvlcXlJ8

/*  media screens */

@media only screen and (max-width: 1200px) {
.content {
    float: none;
}
}



/* Before Header
--------------------------------------------- */
 
.before-header {
	padding-bottom: 20px;
	padding-top: 20px;
	text-align: center;
}


@import url('https://fonts.googleapis.com/css?family=Oswald:500|Roboto+Condensed:300,400');

.nf-field-label label {
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    font-size: 1.7rem;
    color: #016633;
}

/* BULLETS - see theme customization */

/* ........SLIDER........... */
.content .genesis_responsive_slider h2 {
    color: #fff;
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: normal;
    text-transform: capitalize;
    font-family: "Oswald Medium", sans-serif;
    letter-spacing: .1em;
}


 



/* ........H TAGS........... */
h1.entry-title {
    font-size: 3.4rem;
}


header.entry-header {
    font-size: 2.4rem;
}
    
h4 {  /* used in slider*/
    color: #fff;
    font-size: 22px;
  font-size: 2.2rem;
    font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
font-family: "Oswald Medium", 

Open in new window

0
I need to stylize the sidebars for some pages one way and for others another way.  Can't figure out a way to modify css so text is white on green box without making text white on contact page.

Here is css for green box
/*  Locations pages green box in sidebar
--------------------------------------------- */
.greenbox-locations { 
  background-color: #016633; 
  padding:20px 10px 20px 30px;
  color:#fff;
  margin-left:30px;
  width:100%;
}

.greenbox-locations p h2 { 
  color:#FFF;
}

Open in new window


On location pages, I need to have a green box with white text.
beta link: http://25a.e58.myftpupload.com/ccs-sioux-city-plant-1/
screenshot: https://www.screencast.com/t/a54fIOeYBdvG

On this Contact page, I need to have black text with white background.
beta link: http://25a.e58.myftpupload.com/contact-cloverleaf-storage/
Screenshot: https://www.screencast.com/t/kXVUsUV40a

here is css for contact page:
/* ........SIDEBAR ........... */

.sidebar .widget {    /* SIDEBAR IMAGES */
    padding: 0px 30px 10px 0px;
}

.sidebar {
  margin-top:60px;}


.sidebar-primary {
    background-color: #fff;
}


.sidebar p {
    margin-bottom: 16px;
}

.sidebar .widget h2 {
margin-bottom:1.3em;
font-size: 1.6em;}

Open in new window

0
Why do my navigation buttons flash a white color immediately before the mouseover color (dark green) appears?

http://25a.e58.myftpupload.com/
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 5
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

How to I modify the google map in the left sidebar so that it fits in widget better.  If I change the width of the map, then it won't resize properly.

beta site
http://25a.e58.myftpupload.com/ccs-sioux-city-plant-1/

screenshot
https://screencast.com/t/5itICvYKxH
0
I am trying to have the sidebar area have a green background and white text like this wireframe.

Screenshot
https://screencast.com/t/8chlxupaVN

Beta page
http://25a.e58.myftpupload.com/ccs-sioux-city-plant-1-flipped/

Why does the green box appear above all text?

I am using a widget for the sidebar.  Here is the code in the widget

<span class="greenbox-locations">
<h2>CCS Sioux City Plant 1</h2>
2900 Murray Street
Sioux City, IA 51111
(712) 279-0918

Plant Manager
(712) 279-0918 xXXX

Regional Director
(712) 279-8000 xXXX</span>

<strong>MAP GOES HERE</strong>

Open in new window


Here is css
.greenbox-locations { 
    background-color: #016633; 
  padding:5px 30px;
}

Open in new window

0
http://25a.e58.myftpupload.com/ccs-cherokee/
trying to get map to resize as page viewport gets smaller.
0
Hello,

How do we get this video to be centered and look good (full video with right spacing) on all devices - desktop, tablet, mobile.

Home page of www.idiaper.com

<div id="containerVideo" style="text-align:center;width:70%">
    <div id="largeVideo" style="width:400px;float:right">
      <iframe src="//www.youtube.com/embed/rnbBUMN06oU?showinfo=0" allowfullscreen="yes" width="400px" height="225px" frameborder="0"></iframe>
      </div></div>

Open in new window



#containerVideo
{
padding-bottom:0px;
}

#largeVideo {
position: relative;
    padding-bottom: 35%;
    padding-top: 24px;
height: 0;
width:100%;
max-width:500px;
text-align:center;
}
#largeVideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
max-width:451px;
}

Open in new window

0
How do I center the Learn More button on the three widgets on the home page below the animation?  I tried display:block but that didn't work.

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

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

Open in new window

0
I am trying to center text on the 3 widgets (3 circles with icons).  But, when I modify the css, it centers text on all pages!  Somehow I am not specifying the correct css to just modify the text in the widgets.  I tried modifying the below at it had no effect.

entry-content {
  text-align:center;}

Open in new window


http://25a.e58.myftpupload.com/
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.