Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

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 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
Free Tool: Path Explorer
LVL 10
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.

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
I have a responsibe site.

When viewed on a mobile the menu disappears when I try do move to the bottom options. It doesn't happen with only 3 options

I know it is not much to go on. But here is the site:

http://funciona.atletasmexico.com/

Maybe I should change the menu with new different code. Any suggestions will be welcome
0
see theme for vb3
and when i zoom  the page some objects are hide to looks good in responsive
see pic
before zoom
Untitled.jpgafter zoom
ssss.jpg
0
I've created a template in WordPress and I want the page it generates to scale as the viewport size changes. I've done this outside of WordPress by first expressing all my units in rems and then  setting the html font-size proportional to the viewport size by placing the code below in the DOM Ready section:

var viewport_width = $( window ).width();  // Returns width of the current browser viewport
		if (viewport_width < 1400) {	        
			font_pc = (viewport_width / 1400) * .625 * 100);   
			$(html).css("font-size", font_pc + '%');
		}

Open in new window


Actually this starts the scaling when the viewport is < 1400px and  In this example, if the viewport were 1200px font_pc would e 53.6% and that would become the html element font-size, reducing everything expressed in rems.

My question is, how can I pull this off for a WordPress template php file?

Thanks
0
http://www.custompatches.net/test/index3.html

When I resize the browser window down just enough so that the design does its first adjustment, the blue box saying "Get Quote Now" goes in the wrong place. I need it to stay to the right of the top nav, exactly like it does at full size. I cannot figure out what is causing this problem, whether its the actual .quote-title div or if somehow the top nav div is causing it.
0
We have a computer that is connected to a Cisco ASA router. This local router sets up an encrypted tunnel to a Cisco ASA router at a remote location. This remote location has a couple of web servers. From the workstation, I am able to ping (by DNS name and IP address) both web servers, see the ports 80 and 443 open and can always resolve one of the web pages (we'll call it works.company.org). The other webpage we'll call broke.company.org we cannot resolve.

After researching this with wireshark, I can see that the workstation sends a "Client Hello" to broke.company.org, but doesn't see any "Server Hello" response back. However, from the web server side, a packet capture reveals that it does attempt to send its' "Server Hello, Certificate, Server Key Exchange, Server Hello Done" to the workstation, but it doesn't make it to the workstation.

If we change the workstation's IP address to another IP address in the local subnet, it is able to communicate with the web server for about a day and then something locks up that IP address permanently and then SSL handshake will no longer complete until I change the workstation IP address to a new/different IP address in the local subnet.

If we connect this workstation and Cisco ASA Router to a different commercial ISP line, the web page at broke.company.org resolves every time.

We've tried changing the MTU size on the workstation and on the local Cisco ASA router and that doesn't resolve the problem.

The firewalls in …
0
Hi Experts,

One of our websites was compromised and after been restored, noticed the website is in mobile view by default and not showing correctly on desktop, entire layout is not right, in the footer of the page they are not align in 4 columns horizontally, but aligned vertically.  And the logo is not to the left and the banner to the right. Not sure whats happened with the css and some help on this would be much appreciated to restore our site n business online.  url: pgzambia.com
0
Hi

If we were to develop an Mobile learning application for a school/college. What would be the most difficult class to implement/study using a mobile device?

What are the classes that can be easily implement/study and what are the ones that are very difficult to implement/study in a mobile device.

Waiting for inputs

Thanks
0
Dns look up
0
Enroll in September's Course of the Month
LVL 10
Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

I have a web site that is responsive and works well on various mobile devices.  The web pages are currently not online, as my client is by their choice,  manually downloading it to tablets to use.

How do I make it an app that can be opened and downloaded -- ideally without having to be online once downloaded.

Thanks.
0
Hi

I am try to implement the SSO and LTPA for Mobile First Platform, but I don't know how to achieve this.

we are using the Websphere Liberty 8.5.3 and it's running on Linux red-hat.

Could somebody give me some good materials or link for this.
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.