Pages viewed on Android vs iphone

Brian Miller 2

One of my IT support is complaining that one of our giving pages is not resizing on iPhone in any browser type while another giving page, copied directly from this page, is resizing just fine. As I look at the pages on an Android phone they resize perfectly no matter the browser I'm using. Both pages are set to be "Responsive".

nlmed.convio.net/wbglcell (not resizing)
nlmed.convo.net/wciccell (resizing fine)

Thanks everyone.

Brian

Philip Nawrocki

Hi Brian,


I can't get nlmed.convo.net/wciccell to load, but I was able to look at nlmed.convio.net/wbglcell.


On that page, there are hardcoded widths. Check out div class "mesage" which has a width of 800px and div class "donation-form-container responsive" which has a width of 896px.


Using Google Developer tools I commented those out and the form became responsive. It's not centered anymore, so that will have to be fixed, but this should get ya going in the right direction.


Thanks,


Phil

Daniel Hartanto

Philip Nawrocki:

Hi Brian,


I can't get nlmed.convo.net/wciccell to load, but I was able to look at nlmed.convio.net/wbglcell.


On that page, there are hardcoded widths. Check out div class "mesage" which has a width of 800px and div class "donation-form-container responsive" which has a width of 896px.


Using Google Developer tools I commented those out and the form became responsive. It's not centered anymore, so that will have to be fixed, but this should get ya going in the right direction.


Thanks,


Phil

Hi Phil (and Brian)


Although you can manually override the CSS that might probably not be needed

The width:896px seems to come from one of the default Convio CSS file (called ResponsiveBase.css)


What happened with Convio Donation form as currently is that it needs the following trigger to make their related responsive CSS active

"once you set your donation form "Form Layout" to "Responsive within your donation setting, don't forget to add this into your pagewrapper setting (the pagewrapper associated with your donation form obviously) within the Edit mode, under "3. Body Tag Attributes" >> "Additional attributes for the BODY tag" with the following

class="[[?xxtruex::x[[S80:mobile]]x::mobile::]]"  

That would make your donation response properly to the responsive wrapper.

"


I will say give the above a try, and let us know.


regards,

Daniel

Brian Miller 2

Hey, guys! Thanks for looking. I went into the wrapper editor and found this line meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" in the Additional HTML tags for HEAD element. I removed the line, and my iPhone friend seems to be viewing a responive form again. Thanks for your help.

Brian Miller 2

Daniel, when I get back to my computer, instead of working via my phone, I will look at adding that line you mentioned and see what happens.

Thanks again for the help.

Brian

Daniel Hartanto

Brian Miller:

Hey, guys! Thanks for looking. I went into the wrapper editor and found this line meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" in the Additional HTML tags for HEAD element. I removed the line, and my iPhone friend seems to be viewing a responive form again. Thanks for your help.

Hi Brian,


The above meta is not the culprit of why the form is not responsive, and you might not want to remove that as that might be critical for the mobile viewer because what it does is it will make sure that there is no need to zoom-in/zoom-out within the mobile devices and it will make sure that when the page is readable without the need to first zoom in or zoom out basically saying.


Thus doing that is like giving a false sense of responsiveness because while the form would render on its entirety, but it is not user-friendly in terms of usability as people would more than likely now need to zoom in zoom out, scroll here and there (due to the original rendering would likely be hard to see/read) just to find the section that they are looking at especially on those iPhones or smaller screen devices.


Yup let us know when you try the suggested or at worst when that's not working, you might want to rectify the issue by addressing the CSS through overriding the affected container/elements.


regards,

Daniel

Brian Miller 2

Seems to be working with that new line class="[[?xxtruex::x[[S80:mobile]]x::mobile::]]"  added in, and I added the old line back in.  At least that is what I am being told.


Thanks for the help.


Brian

Daniel Hartanto

Brian Miller:

Seems to be working with that new line class="[[?xxtruex::x[[S80:mobile]]x::mobile::]]"  added in, and I added the old line back in.  At least that is what I am being told.


Thanks for the help.


Brian

Always welcome and happy to help, Brian! 


regards,

Daniel


EDIT:


Also don't forget to take off / commented out those fixed width value, as Phil has mentioned initially, being defined within your custom CSS file (in this case they all seems to be residing at allegiancetest.css) such as

.message {

  /* width: 800px; */

  margin: auto;

  margin-bottom: 25px;

}


#logo {

  height: 160px;
  /* width: 870px; */

  margin-left: auto;

  margin-right: auto;

}


These containers are not default containers but rather are generated by your developer(s), hence the need to rectify them manually.

Philip Nawrocki

Looks like it is coming along well Brian.


I just wanted to add that a truly responsive donation form will resize in a browser as well. Looking at your form in Chrome at about 500px wide, you will see copy being cut off. Daniel has the answer for you with the code he suggested.


Thanks,


Phil