Advertise Here

Responsive Web

915

Solutions

7

Content

i
The collection of articles, videos, and posts on this topic.

1K

Contributors

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

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
5 Comments
What does it mean to be "Always On"?
LVL 4
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Go "Always On" Today
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
4 Comments
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
9 Comments
I'm working on a simple xamarin android app, that allows to display a responsive web site, and receive push notifications.

Webview seems to have some limitations on Xamarin, so I used the following workaround (https://github.com/GabLeRoux/xamarin-android-webview-upload) based on the following comments (https://forums.xamarin.com/discussion/3259/cannot-override-webviewclient-class-for-file-upload-support) in order to get html upload button work as expected.

Everything goes well, until I migrate push notifications from GCM to FCM. After that the webview, returns to work as the beginning.

Basically, the html upload button does not open a file chooser dialog, and don't raise any error. It simply does nothing.

Following is the code I'm using on the web activity.

I'm using Xamarin.Android 7.3, and VS 2015.

Any help is welcome.

using System;
using Android.Runtime;
using Android.Views;
using Android.App;
using Android.Content;
using Android.OS;

using Android.Webkit;
using Android.Widget;



namespace sigese
{
    [Activity(Label = "WebActivity")]
    public class WebActivity : Activity
    {


        IValueCallback mUploadMessage;
        private static int FILECHOOSER_RESULTCODE = 1;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.WebLayout);

            ActionBar.Hide();

            var username = Intent.GetStringExtra("username");
            var password

Open in new window

…
0
0 Comments
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
4 Comments
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
2 Comments
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
12 Comments
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
5 Comments
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
4 Comments
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
9 Comments
Free Tool: Site Down Detector
LVL 9
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Access It Now
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
11 Comments
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
11 Comments
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
3 Comments
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
8 Comments
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
13 Comments
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
2 Comments
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
3 Comments
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
11 Comments
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
11 Comments
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE
LVL 4
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.

Watch The Video
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
1 Comment
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
9 Comments
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
2 Comments
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
5 Comments
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
6 Comments
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
16 Comments

Responsive Web

915

Solutions

7

Content

i
The collection of articles, videos, and posts on this topic.

1K

Contributors

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.

Advertise Here
Advertise Here