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

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
Vote for the Most Valuable Expert
LVL 7
Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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
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
Free Tool: SSL Checker
LVL 11
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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
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
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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
Can anyone recommend a wordpress plugin that is for responsive tables that I can add links to the content.  I found a bunch but none seem to let me modify table cell data to add html for links.

 I am redesigning this site and need to find a way to organize this content like they have it with the first column having links to related pages.

Old site:
http://cloverleaf.com/locations/

Beta site
http://25a.e58.myftpupload.com/locations/
Note, I just clumped this info on this page.  IT is not in a table.
0
If you keep the mobile phones safe in your pocket or purse, it's still at risk for picking up a virus or leaking data to thieves. Hackers don't need physical access to your phone to steal your personal information or infect the device with malware. They infiltrate your phone with innocent-looking apps or link to it via unsecured Wi-Fi networks. A Technology blogging site (http://www.mobileblog24.com/ ) talking about this problem. Before some days I take my new phone from online shopping site (https://www.buymobile.com.bd/). Some informative site (http://www.bbc.co.uk/ ) also provide disadvantage of hacking. Now I want to know how can protect my mobile phone from being hacked?
0
In the footer of this page are 3 small thumbnails (baby,back and foot).  These are set to be 1/3 the size of the page but they appear shifted to the left and they do not fill the footer screen.  What did I do wrong?

http://fallshealingarts.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.

Top Experts In
Responsive Web
<
Monthly
>