Still celebrating 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

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

http://25a.e58.myftpupload.com/
0
On Demand Webinar: Networking for the Cloud Era
LVL 10
On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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
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
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
Hello,

On this page:

www.idiaper.com

There's a "Shop by Categories" area.

How do I get the category buttons centered in desktop and mobile?

#categories-frontp
{
text-align:center;
}

.banner-frontp
{
padding: 0px 0px 15px 0px;
text-align:center;
max-width:935px;
height:auto;
}

.buttons-frontp
{
text-align:center;
max-width:935px;
height:auto;
}

.buttons-frontp img
{
padding: 11px 11px;
float:left;
max-width:182px;
height:auto;
}

Open in new window


<div id="categories-frontp">
 	<div class="banner-frontp"><img style="border:0px" alt="shop-by-category-home-page-title" src="/assets/images/shop-by-category-banner-frontp.gif"></div>
 		<div class="buttons-frontp">
 		<a href="http://www.idiaper.com/adult-pullups"><img style="border:0px" alt="pull ups button" src="/assets/images/adult-pull-ups-frontp.gif"></a>
		 <a href="http://www.idiaper.com/adult-diapers-with-tabs"><img style="border:0px" alt="adult diapers with tabs button" src="/assets/images/adult-diapers-with-tabs-frontp.gif"></a>
		 <a href="http://www.idiaper.com/adult-cloth-diapers"><img style="border:0px" alt="adult cloth diapers button" src="/assets/images/adult-cloth-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/mens-diapers"><img style="border:0px" alt="mens diapers button" src="/assets/images/mens-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/womens-diapers"><img style="border:0px" alt="womens diapers button" src="/assets/images/womens-diapers-frontp.gif"></a>
		 <a 

Open in new window

0
Concerto's Cloud Advisory Services
LVL 4
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Grrrr, not sure why I can't get this to work.  I am trying to make the background of this widget area (which is now yellow) to black.  When I use the inspector, it says to modify this code:
.education-pro-blue .home-middle {
   background-color: #yellow;
}

Open in new window

But when I go into my css and add this with black as the color, it never changes!  Not sure what is going on.  Perhaps something is overwriting it?

Screen shot
https://screencast.com/t/ZREVkzyR

Beta site
http://24a.762.myftpupload.com/
0
I widen Footer 3 Widget that has the "Visit Us" address info at bottom of site so that the city, state and zip were all on one line.  
http://681.3b0.myftpupload.com

.footer-widgets-3 {
  width:300px;
}

Open in new window


I reduced width of Footer 4
.footer-widgets-4 {
    float: left;
  width: 340px;
}

Open in new window

and that did help positions things more attractively on desktop but it laid goofy on mobile devices.  The "How Can We Help" info appears flush left.  I would like the "Call Us" and "Visit Us " to also float left.  That is how they are setup but is doesn't work.
0
I am using centric pro theme on genesis platform.  On home page, there is Home 2 widget where I can put a featured page and can show featured image.  

The size options offered are not ideal.  The one we are using now is pretty large at 960x700.  Is there a way we can modify it so there is a smaller size option?  The next size down is 400x300 which is too small.  

screenshot of widget
https://screencast.com/t/Wje1umCQSdL

Beta site
http://681.3b0.myftpupload.com
0
The navigation on a CELL phone is two lines full width.  This gets confusing because some buttons have drop downs.  I like it full width for other screen sizes but not the smallest size.  How do I change navigation to float left for smallest screen sizes?

beta site
http://681.3b0.myftpupload.com/

 I tried this but it didn't work.

@media only screen and (max-width: 320px) {
.genesis-nav-menu li a {
  text-align:left;
  }
}

Open in new window

0
How do I change hamburger icon color?  Right now it is set to white and disappears because header is white.
http://681.3b0.myftpupload.com/
0
I am trying to get the footer credits a:hover link "Nsite Designs" to turn another color other than white.  When I make a change to css, it changes the colors in the tan box immediately above the footer.  I can't seem to single out just this link.  I tried using inspector did not have any luck with that.

http://681.3b0.myftpupload.com/falls-healing-arts-staff/
0
I am using Centric theme from Studio Press. I was able to replace blue colored box with an image of a lady with arms outstretched on my home page. The problem is that image of a lady is on every page!  How do I remove that master large image from interior pages?  This site for zurix did it but I can't figure out how.

Default theme from Studio Press
https://my.studiopress.com/themes/centric/#demo-full

My Beta site
http://681.3b0.myftpupload.com/

Goal site
http://www.zurixinc.com/about/
0
How do I modify the css so that the large image (woman with arms outstretched) resizes to fit mobile devices?  I try to use firebug but am not able to click on image to view code.

Beta site
681.3b0.myftpupload.com

Tablet Screenshot
https://screencast.com/t/UK86sQAC6L7E

Phone Screenshot
https://screencast.com/t/q45pgs0M3T
0
hello,

If you view this webpage on an Android mobile device, you cannot click the "start my Book" button on click any link below it

https://www.mycustomkidsbooks.com/personalized-books/personalized-baby-gifts/

It works on all my emulators, so i am stuck on how to troubleshoot it.

Can you please help with CSS to fix the issue or an online emulator which can duplicate the problem
0
Technology Partners: We Want Your Opinion!
Technology Partners: 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!

Does anyone know how they setup this gallery?  
https://www.powderkegwebdesign.com/our-work/

I like how the gallery thumbs are right next to each other and I like the mouseover effect which links to a separate page with more details about the project.  It changes too when you resize it.  Way cool!  I am hoping it is a plugin but wasn't able to determine that when I checked it out.
0
Hi all,

I'm look for the best  image resizing web service that can handle  the most various image type (Jpeg,bmp ..) and image header.
What is the most effective technology/plateforom  (JAVA,C#,PHP,Python,Ruby etc ...) to use to do this ?
Any  feedback  are welcomed

Thanks for your return
0
Hi, a couple of weeks ago I posted our website and asked for help regarding the responsive web design. I stated that the menus were not showing up in iPhones or iPads. Someone kindly helped me out with CSS code as follows (includes having whatever menu that is current showing up in a green highlight): However, I checked on my iPad and the menus do not show up, but they do on an iPhone. Please help. Our website is: www.peakventures.ca.

#mainnav ul li a {
color:#0b0d33 }
li.current-menu-item {
background: #3FAEA5;
color:#fff;
}
@media only screen and (max-width: 767px) {
.btn-menu {
    display: inline!important;
    background-color: #f000!important;
color: #000!important;

}
.col-md-8 {
    width: 100%!important;
}
}

Thank you,
Tina
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
I am trying to replace the background image for the .sub-footer.  The following code is for the background image
 
.outreach-pro-blue .sub-footer {
    color: #fff;
  background-image: url("http://4aa.4ca.myftpupload.com/wp-content/uploads/2017/04/Fotolia_19958212_M.jpg");
    background-color: none;
}

Open in new window


Inline 71 is the problem.  How do I change that?
0
I previously posted a question on responsive web design and it was answered. OK, so here is the next one. When I view our website: www.peakventures.ca the menus which were fixed by Pankaj Jangir (thanks so much) show up nicely in a desktop computer. However, when I tried to view them on my iPhone, the website shows up but not the menus. Any thoughts?

Thanks,

Tina
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.