Responsive Web

907

Solutions

5

Articles & Videos

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

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
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!

I am using Centric Pro by Studio Press.  I put a Genesis Responsive Slider in Home 1 widget which is not standard for this theme.  I would like the image to extend the width of the screen or at least a bit more than it is now.  

On the slider settings page, I have it set to Max Slider Width 1270 px.

http://681.3b0.myftpupload.com/
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
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
Announcing the Most Valuable Experts of 2016
LVL 6
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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
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
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
Industry Leaders: We Want Your Opinion!
Industry Leaders: 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!

Looking to add another certification to your resume? Google Partners has added another exam to their offerings, this time targeting Mobile Developers.
4
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
Native apps are dead!!??? Progressive apps seems to be the future. It takes a lot user effort to chose and download a native app. Therefore, users will be more likely to use a progressive app. Besides, it is more cost efficient than native apps. Do you think progressive apps are going to be the new trend?

If you haven't heard about them. Check out this video: https://www.youtube.com/watch?v=DQLyhcMoZUQ 
4
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
Although the video sounds like an ad for Firebase, I 100% agree with the idea that creating and managing native apps for multiple platforms is not worth the effort for most businesses.  

Whenever I have said it's not worth the time and effort, there is always resistance with the default, "Mobile devices have over taken desktop... .... You have to have a mobile app today... ....yada yada yada"

There are enough platforms and libraries that can give you a native like experience at a fraction of the development time and cost.  Also, people forget about the increased effort for security of a native app.    I have a friend that built an app for a specific vertical and I tried to talk him into creating a web app first.  More than two years of development vs what would have been several months only to find the other issue I warned about.... users not willing to pay for apps on the Android platform.  A lot of wasted time and energy!
1
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

Responsive Web

907

Solutions

5

Articles & Videos

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.