Question

Photo of Shawn Ross

0

CSS, Bootstrap elements not acting as expected

1

Summary and Background

We have a page setup for giving. The site uses the Stark theme currently. We have some custom CSS Overrides specifically to enhance the mobile Giving UI. We use OnlineGiving's embed block.
I'm having some issues with the class functions (such as alert alert-info) used for styling not 'staying within' it's block (within the same zone)

URL where the problem exists: https://my.calvary.church/page/621

What happens:

  • The section stating 'Your parnership....' is styled blue just as the 'Welcome to Calvary's new Online Giving Portal.
  • The section 'Your partnership' should not be styled blue.
  • The text from the HTML contents is not staying 'within' the columns i would expect for some screen sizes. Some elements (like the one styled alert-info) stay 'on' the screen and display properly on mobile. But the others run off the left and right.

What we are trying to accomplish

  • Whether someone visits the page, still display the 'thank you' and the 'welcome to new', but still show the giving form (meaning the thank you and welcome need to be smaller on small screens).
  • When someone visits the page on a desktop browser, the 'Your Partnership' and 'Welcome' is smaller (H3)
  • When someone visits the page on a small screen (mobile) browser, the 'Your Partnership' is smaller (H4). This would enable it to still show, but it wouldn't dominate the screen.

CSS Overrides used:

@media only screen and (max-device-width : 768px){
    .og-give-page .pagetitle{
        display: none;
    }
    .og-give-page header .navbar{
        /* margin-bottom:0; */
    }
    .og-give-page .breadcrumb, .og-give-page .nav-sub{ 
        display: none;
    }
	.og-give-page main.container, .og-give-page #form1 > main > div:nth-child(5){
		margin: auto;
		padding: 0;
		width: 100%;
	}
    .og-give-page #form1 > main > div:nth-child(4) > div.col-md-9, .og-give-page #form1 > main > div:nth-child(5) > div.col-md-9{
        padding: 0;
		margin: -35px 0 0 0;
    }
}

Give page main zone blocks:

  • HTML Block for 'thank you' text: "Your parnership..."
  • HTML Block for 'welcome to new giving' text: "Welcome to Calvary's new..."
  • HTML Block for 'Questions' text: "If you are a current..."

Thank you HTML (no pre/post-html in use)

NOTE: I had to remove the < and > from all HTML below... it wouldn't display otherwise

div
    div class="col-xs-12 col-sm-12"
    h4 class="hidden-md hidden-lg"
        Your partnership makes the mission happen here at Calvary. 
        Together we are able to join God as a community of Christ followers who are Loving God, Changing Lives and Transforming Communities.
    /h4
div
div class="col-md-12 col-lg-12"
    h3 class="hidden-xs hidden-sm col-xs-12 col-sm-12"
            Your partnership makes the mission happen here at Calvary. 
            Together we are able to join God as a community of Christ followers who are Loving God, Changing Lives and Transforming Communities.
    /h3
/div
/div

Welcome to new giving HTML (no pre/post-html in use)

NOTE: I had to remove the < and > from the HTML below... it wouldn't display otherwise

div
    div class="alert alert-info"
        a href="/Login?returnurl=%252fgive%252fgivenow">Welcome to Calvary's new Online Giving Portal. CLICK HERE to login or to create an account and easily manage your giving, view your giving history, and more!/a
    /div
/div

Questions HTML (no pre/post-html in use)

NOTE: I had to remove the < and > from the HTML below... it wouldn't display otherwise

div class="col-md-12 col-lg-12"
    h5
        If you are a current online giver and would like information about your existing Clover account which will expire August 31, 2018, contact Diane Tod 636.939.4343 ext. 1111 or dtod@calvaryonline.cc
    /h5
/div
  • Photo of Shawn Ross

    0

    Update; I'm close to having it work correctly. However, I'm experiencing some weird behavior with the 'alert alert-info' class.

    Thank You HTML block contents: 

                <div class="col-xs-12 col-sm-12 hidden-md hidden-lg">
                <h5>
                    Your partnership makes the mission happen here at Calvary. Together we are able to join God as a community of Christ followers who are Loving God, Changing Lives and Transforming Communities.
                </h5>
        </div>
            <div class="hidden-xs hidden-sm col-md-12 col-lg-12">
                <h3>
                    Your partnership makes the mission happen here at Calvary. Together we are able to join God as a community of Christ followers who are Loving God, Changing Lives and Transforming Communities.
                </h3>
        </div>

    Welcome to new giving HTML 

            <div class="alert alert-info">    
            <a href="/Login?returnurl=%252fgive%252fgivenow">Welcome to Calvary's new Online Giving Portal. CLICK HERE to login or to create an account and easily manage your giving, view your giving history, and more!</a>
        </div>

    Behavior I'm experiencing:

    • The blue alert alert-info styling applies correctly, but also to the HTML block ABOVE it.
      <a href=<amp />quot;http://take.ms/dCgD5<amp />quot;>Example from normal visitor view</a>
    • When viewing the page as an admin, the same thing happens between my 'Questions' HTML block and the Redirect Block's warning text.
      <a href=<amp />quot;http://take.ms/TlvNV<amp />quot;>Example from Admin View</a>