Issue with page in Mobile version

Abdi Jibril

Hello All,

I have basic to intermediate knowledge in CSS, and I have a page that does not render correctly when using mobile.  Everything else looks renders correctly in mobile except menu does not show when you click on the 4-5 horizontal line  to see Main Menu. 

https://secure3.convio.net/pnfou/site/Donation2;jsessionid=00000000.app30125b?idb=1938585028&df_id=2140&mfc_pref=T&2140.donation=form1&NONCE_TOKEN=1E6DE6EFCD9331AD80B29757C9BA5F83&idb=0


Thanks,

Abdi 

Philip Nawrocki

Hey Abdi,


I think this might be an issue with your modernizr.js file. The reference points to https, but it cant load it over https for some reason. I can load it on http:

https://foundation.parknicollet.com/teamraiser-themes/theme1/js/modernizr.js Firefox throws an error message and I see it in the console when inspecting your code

http://foundation.parknicollet.com/teamraiser-themes/theme1/js/modernizr.jsThis does load. Check it out in your code.


It is referenced as this:

<script src="//foundation.parknicollet.com/teamraiser-themes/theme1/js/modernizr.js"></script>



I noticed your credit card images were stacking as well. You need to do some CSS changes, but I don't know how else they will affect your site.

inline.css

#content img

display: inline;

bootstrap.min.css

img

vertical-align: top;

CustomStyle.css (this you might have to overwrite due to this being your LO stylesheet)

ul,li

text-indent: o;



Let us know how it goes,


Phil



 

Francis Lim

Hi Addi,


I recognize the wrapper template you are using, and I have dealt with similar issue before. You are missing some Bootstrap parameters in your <button> tag - it's either in a the wrapper HTML or a reusable. Try update the Button code to this, and it should work:


<button class="navbar-toggle" data-toggle="collapse" data-target="#header-nav">


Good luck.


-Francis

Abdi Jibril

Philip Nawrocki:

Hey Abdi,


I think this might be an issue with your modernizr.js file. The reference points to https, but it cant load it over https for some reason. I can load it on http:

https://foundation.parknicollet.com/teamraiser-themes/theme1/js/modernizr.js Firefox throws an error message and I see it in the console when inspecting your code

http://foundation.parknicollet.com/teamraiser-themes/theme1/js/modernizr.jsThis does load. Check it out in your code.


It is referenced as this:

<script src="//foundation.parknicollet.com/teamraiser-themes/theme1/js/modernizr.js"></script>



I noticed your credit card images were stacking as well. You need to do some CSS changes, but I don't know how else they will affect your site.

inline.css

#content img

display: inline;

bootstrap.min.css

img

vertical-align: top;

CustomStyle.css (this you might have to overwrite due to this being your LO stylesheet)

ul,li

text-indent: o;



Let us know how it goes,


Phil



 

Thanks, Phil. 

Where would this file be in LO: http://foundation.parknicollet.com/teamraiser-themes/theme1/js/modernizr.js? I cannot seem to find it anywhere.  I'm also having hard time finding these files CSS files you noted:  (inline.css, bootstrap.min.css).  I can only see CustomStyle.css and able to fix that css code. 

Abdi Jibril

Francis Lim:

Hi Addi,


I recognize the wrapper template you are using, and I have dealt with similar issue before. You are missing some Bootstrap parameters in your <button> tag - it's either in a the wrapper HTML or a reusable. Try update the Button code to this, and it should work:


<button class="navbar-toggle" data-toggle="collapse" data-target="#header-nav">


Good luck.


-Francis

Thanks, Francis.  


Will take a look at that.