Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

iamme123

Member
  • Posts

    129
  • Joined

  • Last visited

Community Answers

  1. iamme123's post in Hide the close "x" button from a promotional pop up was marked as the answer   
    Here's what worked for me in the CSS Editor:
    .sqs-popup-overlay-close {display: none !important}
  2. iamme123's post in Wexley: Mobile Navigation Font Color was marked as the answer   
    Here's what I used that works for tablet and mobile:
    @media only screen and (max-width: 1000px){ .folder-toggle-label, .subnav a, .page-collection a {color:white !important;} }
    Pasted that into the CSS Editor. You can reduce the "max-width: 1000px" to "640px" instead if you want it to affect mobile but not tablet.
  3. iamme123's post in Pacific: Center Blog Page text was marked as the answer   
    Paste this into the CSS Editor:
    .excerpt-content {text-align:center}
  4. iamme123's post in Brine: Folder navigation hover color was marked as the answer   
    Looks like this works actually:
    .Header-nav-folder-item:hover { color: red !important; }
    Paste it into the CSS Editor to try it out, and replace "red" with any color or color code you want.
  5. iamme123's post in How to embed a Google Calendar in a responsive way? was marked as the answer   
    Here's what I did with my site, and it works great for my Google calendar needs. I used @jehrler's option for large and small containers within a Code Block with the Google Calendar embed code, but I changed the type of calendar I was embedding on mobile so the content fits on the screen. As long as the "&mode=" equals "AGENDA" for the small container it should display the agenda list, but you can copy this from directly within your Google Calendar.
    I used the "month" calendar embed option for the big container with a width set to "100%" and a height of "650" like so:
    <div class="responsive-iframe-container big-container"> <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=700&wkst=1&bgcolor=%23db694f&src=egubo4gbnflkandnr4r2n554%40group.calendar.google.com&color=%23fbdbac&ctz=America%2FLos_Angeles" style="border-width:0" width="100%" height="650" frameborder="0" scrolling="no"></iframe> </div>
    Then used the "agenda" calendar embed option for mobile devices with a width of "100%" and a height of "600" like so:
    <div class="responsive-iframe-container small-container"> <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=800&wkst=1&bgcolor=%23db694f&src=8m2gergpnwapfiht0384htn554%40group.calendar.google.com&color=%23B1440E&ctz=America%2FLos_Angeles" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no"></iframe> </div>
    This will give you a responsive iFrame agenda list on mobile that can be scrolled through, while still having the large calendar view on desktop.
    Lastly, you need to add this to the Page Header Code Injection for that page:
    <style> @media (max-width: 550px) { .big-container { display: none; } } @media (min-width: 550px) { .small-container { display: none; } } /* Responsive iFrame */ .responsive-iframe-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .responsive-iframe-container iframe, .vresponsive-iframe-container object, .vresponsive-iframe-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>
    Here's the page with this so you can see what it looks like when done correctly:
    http://pdxblues.com/events/
×
×
  • Create New...