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

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
[Webinar] How Hackers Steal Your Credentials
LVL 9
[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

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

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
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 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
I am editing a website that I did not create. It was done in Wordpress with the Sydney theme. My boss told me that it is not responsive to the screen being used that sometimes viewing it on a phone for example, the menus are cut off. How can I make sure that the website is responsive? Here is the website: www.peakventures.ca. Thank you kindly.

Tina
0
Hi

I have been developing in ASP.net for around 6 years (VB.net). Do you think that Microsoft will ever
make it possible to develop cross platform mobile apps without having to purchase Xamarin.
At the moment I design responsive web apps for businesses and it would be nice to know that
at some point a web app could be deployed as a cross platform mobile app.

Thanks
0
What the heck happened?  My navigation is a mile long on mobile devices.

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

Beta site
http://9bf.27e.myftpupload.com
0
On Demand Webinar: Networking for the Cloud Era
LVL 9
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 do I remove the default wordpress template positioning of the logo?  They have it pushed "down" so it sits in the orange circle area.  I want it so bottom of logo is even with bottom of navigation bar.  Additionally,  I would LOVE to be able to increase logo size but can't figure it out.

beta site
http://9bf.27e.myftpupload.com/

screen shot
https://screencast.com/t/Fzw9PWfMPSs
0
Occasionally we get this message across the top of the site.  And then it goes away.  Any idea what causes it and how to remove?  The site is a wordpress site using genesis framework.  I also attached a screen shot.  This happens on phones and desktops.

Warning: Class __PHP_Incomplete_Class has no unserializer in /home/content/a2pnexwpnas04_data01/40/3310340/html/wp-content/object-cache.php on line 894

Warning: Cannot modify header information - headers already sent by (output started at /home/content/a2pnexwpnas04_data01/40/3310340/html/wp-content/object-cache.php:894) in /home/content/a2pnexwpnas04_data01/40/3310340/html/wp-content/plugins/planso-forms/libs/wp-session-manager/class-wp-session.php on line 124
0
When you go to url directly, http://chopperrose.com/blog/ all you see is  code.  
https://screencast.com/t/o8m6sGwXhrvE

However, when you login to dashboard and view page, you can see page just fine.
https://screencast.com/t/yamNDv2c

When you click on navigation button on the webpage (when viewing live webpage from dashboard) you get this error (Firefox has detected that the server is redirecting the request for this address in a way that will never complete.This problem can sometimes be caused by disabling or refusing to accept cookies.)  We also occasionally get errors that there are too many redirects.  I created new page and added it to menu bar. Was able to view the page when editing it but again I get an error when I try to click on it.  

We think a plugin might have been deleted.  Is there a way to see what plugin the site is setup for but that it is missing?
0
We just added social media icons to right sidebar on this test page.  Site was built using boostrap which I am not that knowledgeable with.

http://wiplastic.com/test.html

How do I get the icons to display on ALL screen sizes?  They are floated left now.  I tried adding the float left property
 .float_left {
      
      float: left;
      margin-right: 8px;
	  margin-bottom:10px;
      
    }

Open in new window

to the
@media (max-width: 200px)
	}

Open in new window

section on the wiplastic2.css file but it didn't work.
0
Hi Experts,

I took a CSS course, and was thought that when designing a website with @media breakpoints, start from the smallest (mobile) and work up to tablet, desktop, etc... Is there a specific reason for this?

Personally, I'd prefer the opposite - laying out all my elements on my desktop, then work down to tablet, then finally mobile?

Any feedback will be appreciated.
0
Is Windows Xamarin the next great tool for Cross platform mobile development? What are the alternative tools available and their advantages?

Is jquery mobile another great tool for Cross platform mobile development?
http://jquerymobile.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.