Issue with page in Mobile version

Options
Abdi Jibril
Abdi Jibril
Tenth Anniversary Photogenic First Reply Loyalty
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
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 
Tagged:

Comments

  • Philip Nawrocki
    Philip Nawrocki
    Ancient Membership Facilitator 3 Name Dropper Photogenic
    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
    Francis Lim
    Ancient Membership Facilitator 1
    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
    Abdi Jibril
    Tenth Anniversary Photogenic First Reply Loyalty

    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
    Abdi Jibril
    Tenth Anniversary Photogenic First Reply Loyalty

    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. 

Categories