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

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
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
How would a responsive web design would react inside an iframe? Would it be still responsive?

I wonder, if I have an iframe 600 px width and 400 px height, would responsive design fit in the iframe?
0
We currently develop mobile applications. Our QA testing process is very manual and involves having a team utilise physical devices with the applications loaded, and test on them.

I understand there are automated tools/solutions where:

i. A device can be held in a remote data center and remotely connected to

ii. Automated tests can be carried out on such devices and recorded

iii. Developers can run debug tools on their local machines and be connected to these remote mobile devices

Any recommendations?
1
We created website for client using their OLD host.  Then I did not have access to ftp login so was unable to make backup of site.

So, today, site freaks out and I am in a pickle.  It looks like site is displaying without theme but we cannot login to dashboard to check.  When I look at ftp files wp-content/themes I do see the theme listed there....

http://scvmemorial.org/

Today host gave me ftp credentials.  I was able to login and I reuploaded the themes to the wp-content folder.  No help.

This is the error I get when I try to login to dashboard.

The page isn’t redirecting properly

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.

Open in new window


This is the problem I get when trying to login to dashboard on google chrome
The scvmemorial.org page isn’t working

scvmemorial.org redirected you too many times.
Try clearing your cookies.
ERR_TOO_MANY_REDIRECTS

Open in new window


Any suggestions?
0
Hi,
On this site here http://barefruit.com.au/dev/ you can see the header slides with the content, but on follow on pages, like http://barefruit.com.au/dev/about-us/ the header stays put.
How do I make the homepage header behave in the same way as the rest of the site?

Thanks
0
Been struggling trying to get the Book Today button next to each room description to display to the right of the room fee.  Button is from a plugin called MaxButtons. Hoping someone can assist.

Beta page
http://8c2.bb5.myftpupload.com/rochester-inn-room-amenities/

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

.book-button{margin-left:40px;
display: inline;}

Open in new window

0
Hi,
On this site her http://tchp.com.au you will see when you make it mobile the phone number on the right hand side crumble in.
How can I fix this header to be responsive and to also make it so you can click the phone number to take it to your mobile to ring.
I notice when its responsive the logo disappears, which isn't ideal, so how can I make it so the logo and the phone number are still showing onthe mobile and and the mobile is a hyperlink?

Can anyone help on this one at all for me?

Thank you and i hope there is a solution because I am lost on this...unless I create a sigular image that I make a hyperlink in the header.php file?  Would that work?

Thanks,
A
0
The template inserts one quote mark in the testimonials area.  Can't seem to figure out what is calling it using Inspector.  I assume it is a background image.  We either want to get rid of it or move it to the left.  Any advice?

Beta site
http://8c2.bb5.myftpupload.com/

Screen shot
https://screencast.com/t/DF1GIPpYG3
0
Hi E's,
I have this code, that use materializedcss. I create a row with 3 columns, white text, image and text.
I can aling horizontal using the class "center-align", but the the vertical-align the framework don't have any class to do that:
<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
    
    <div class="container">
    <div class="row">
    <div class="col s12 m4 l4">
    Nam a elit sapien, at ultricies tellus. Donec neque erat, ullamcorper vitae consequat et, commodo at ligula. In consequat nibh at nisi placerat. Suspendisse potenti. Morbi fringilla feugiat tortor suscipit accumsan. Lorem ipsum dolor sit amet. Donec neque erat, ullamcorper vitae consequat et, commodo at ligula. In consequat nibh at nisi placerat. Suspendisse potenti. Morbi fringilla feugiat tortor suscipit accumsan. Lorem ipsum dolor sit amet. Nam a elit sapien, at ultricies tellus. Donec neque erat, ullamcorper vitae consequat et, commodo at ligula. In consequat nibh at nisi placerat. Suspendisse potenti. Morbi fringilla feugiat tortor suscipit accumsan. Lorem ipsum 

Open in new window

0
Hi Exp's,
I develop a website using Materializecss framework.
I try to put in the same row, with 3 columns, a image, text and image again.
The problem is, the images do not touch the tips, like you can see in http://comerciveda.pt/empresa.php (user "comerciveda" + password "vedacoes".
page appearanceWhat am I doing wrong (the pictures should be glued to the corners without spaces)?

The best regards, JC
0
I'm trying to get a 1200px page to display in a Samsung S7.  Since the S7 has a 1440x2560 screen I would expect the page to display fine,  but all I see is about the left quarter of it,  with no ability to swipe left to see more.  I tried adding  a viewport meta tag:

<head>
	<meta name = "viewport" content="width=device-width, initial-scale=1.0" />

Open in new window


but I get the same results.   Does anyone know how to get this page to display correctly?

The page I'm trying to display is at    https://thebarcoderegistry.com/verify/?barcode=040232534218

Thanks
0
Might seem like a stupid question, but I'm not having a ton of luck looking around and have some crazy deadlines right now.

Have any of you used a jquery/responsive photo gallery that looks kinda like this, that's responsive, has a thumbnail carousel on the bottom, with captioning?



Any leads in the right direction would be awesome!  Thanks!
blahdahblah.jpg
0
Hello,
I'm having quite a time manipulating some styles on this particular phone. I've even tested the S7 on Browserstack and it looks fine. However, on my client's EDGE he's seeing a large gap.

Here is the page:

http://2017.lucidityfestival.com/course/creativeworks/

I've even added a media query to specifical target the edge and I did see some changes. Originally, the text was covering the images without padding applied to the div. I was able to add padding using the media query, but I'm not able to make a change when I decrease or increase the padding. This is confounded by having the phone being up in Oregon, while I'm trying to make changes here and my client refreshes. I figured there was a better way and someone here can see where I've gone wrong in the CSS.

There is another page with similar layout, but with different classed divs and it looks fine on the EDGE phone:

http://2017.lucidityfestival.com/lucid-university-courseweek/

Here's the S7 media Query:

/* samsung s7 portrait */
@media 
    (-webkit-min-device-pixel-ratio: 3)
    and (min-resolution: 192dpi)and max-width:640px){
		.single-course .section .section-inner {
			padding-top: 30%;
			padding-bottom: 25px;
		}
}

/* samsung s7 landscape*/
@media 
    (-webkit-min-device-pixel-ratio: 3) 
    and (min-resolution: 192dpi){
		.single-course .section .section-inner {
			padding-top: 30%;
			padding-bottom: 25px;
		}
}

Open in new window


Any help would be appreciated as I'm pulling my hair out over here! ;)
0
Hello,

If I want to make my own social media website with new features where do I go majento? And if so, which template do I use and what scripting languages do I learn?

Need to make a corresponding app.

Know HTML, CSS, Java, Some Javascript, Some PHP, Some SQL, experience with many programming languages but concerned about time of build.
0
Beta site link
http://bb0.036.myftpupload.com/

The slider/animation has text which you can see when you place your mouse on right edge of animation.  The text is not resizing nicely for phones.  Here is screen shot
http://screencast.com/t/XJNRQd1UcM2

I thought the below code was for the animation but the modifications I make to it don't seem to make a difference.
.parallax-slider #mainCaptionHolder .slider_caption h1 {
font-size: 40px;
}

.parallax-slider #mainCaptionHolder .slider_caption h2 {
font-size: 35px;
}

 
.parallax-slider #mainCaptionHolder {rgba(0, 0, 0, 1)!important;} 

.parallax-slider .btn {
     font-size: 23px;
}

Open in new window


I am having problems using Inspect Element because the animation goes away when I click Inspect Element.

Here is link to template that IS working.
ttps://www.templatemonster.com/demo/53001.html
0
I am unable to figure out the declaration to fix the h2 tag so that there is a smaller gap between the h2 and p tags on interior pages.  When I add an h2 declaration with 0 padding and margins it does nothing.  Maybe it is a bootstrap thang?

http://bb0.036.myftpupload.com/models-for-sale/
0
How do I get these  3 images (golf, swim, ride bikes) to float to the right?

http://bb0.036.myftpupload.com/recreation/

<img class="wp-image-2782 alignright" src="http://bb0.036.myftpupload.com/wp-content/uploads/2016/11/bike-ride.jpg" alt="bike-ride" width="400" height="268">
<img class="wp-image-2600 alignright" src="http://bb0.036.myftpupload.com/wp-content/uploads/2016/12/pool.jpg" alt="pool" width="400" height="268">
<img class="wp-image-2807 alignright" src="http://bb0.036.myftpupload.com/wp-content/uploads/2016/11/golf.jpg" width="400" height="268">

Open in new window

0
Hi Experts ,

Can you provide Beginners tutorial book or video for storyboard to  Develop UI for IOS ?

Thanks Experts
0
I am trying to remove a border from an element but am having problems determining which element is calling it to display.

beta site
http://bb0.036.myftpupload.com/

There is a very fine, thin gray line.  The arrows on the screen shot point to it but it is kind hard to see.
http://screencast.com/t/RcuYHCtHRQ
0
I am having a difficult time trying to modify the h2 on "interior" pages of my site and not have it impact the home page.  

beta site
http://bb0.036.myftpupload.com/

http://bb0.036.myftpupload.com/models-for-sale/
I am trying to make the "Financing Your Purchase" h2 tag to be smaller but when I modify it, that also modifies the Home page's "Simply Sophisticated " which appears below animation.  

I use this for the Financing Your Purchase  

.main-holder h2 {
    text-transform: capitalize;
    font-family: muli;
}

Open in new window


and this for the home page
h2.title-box_primary, .banner-wrap p  { /*h2 below slider*/
font-weight: normal;
    line-height: 60px;
    font-size: 47px;
    color: #5f5f5f;
text-align:left;
  text-transform: capitalize;}

but when i modify one, it impacts both.  help!
0
Trying to increase the number of words/characters that display in the 4 thumbnail boxes below the slider.  Using template monster theme real estate 24.  i contacted template monster for support and they kept telling me to modify the functions.php file in the Cherry framework directory but there was NO file with that name!

Here is beta site
http://bb0.036.myftpupload.com/

Screen shot
http://screencast.com/t/FSjJXCFi3
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.

Top Experts In
Responsive Web
<
Monthly
>