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

iamme123

Member
  • Posts

    129
  • Joined

  • Last visited

Everything posted by iamme123

  1. I'd recommend trying this in the CSS Editor: a {background-image:none !important;}
  2. Here's what worked for me in the CSS Editor: .sqs-popup-overlay-close {display: none !important}
  3. I don't want visitors to be able to close my pop up until they click the button to confirm - is there an option for this?
  4. 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.
  5. Just looking to change the font color for mobile devices only when using the Wexley template.
  6. Paste this into the CSS Editor: .excerpt-content {text-align:center}
  7. Wanting to center the excerpt text and read more link for blog posts on the Pacific template.
  8. 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.
  9. When my navigation is over a banner in Brine the folder nav links show the same color as my folder background color on hover. I don't want to change the active nav link color, just the hover color for links in a folder.
  10. There's a Chrome browser extension that will find the page's collection ID for you as well to make that easier: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
  11. Here's what I'd recommend: First upload the logo image to the CSS Editor with the Manage Custom Files button Then go into the Notifications panel to edit the order email footer and add this code: Just add the URL between the quotation marks "" after src= with your logo image URL. This will also ensure that the logo image doesn't span the full width of the order email and has a line break between the image and any other text you have in the footer.
  12. You can also use this block identifier in Chrome to get block IDs easily: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
  13. @bcassin If the small container's iFrame code has "&mode=AGENDA" in it that would be the cause. Remove just those characters from the iFrame code and it should change it to a monthly view.
  14. I just tested out the Events page I linked as an example for this on an iPhone 6s and it looks like it's loading for me without issue. I'm not sure if your device needs troubleshooting if you're not able to see the page, but you might check to see that everything's up to date and try restarting the phone. I tested out the code you provided on a test page and used the CSS in the
  15. Hey Ben, sorry I didn't see this until now! Not sure why I didn't get a notification. As long as the iFrame's are both wrapped in this code it should allow you to hide and show one or the other on different screen sizes: <div class="responsive-iframe-container small-container"> *iFrame code for mobile goes here* </div> Both the "monthly" and "agenda" iFrames can be pasted into a single Code Block on the page, each one wrapped in the div code for the small container (mobile agenda view) and big container (desktop and iPad monthly view). The "@media" CSS pasted into the Page Header Code Injection section should hide and show each iFrame.
  16. You can also use this Chrome extension to get the unique block ID to target any individual Text Block on the site for CSS: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Then structure the CSS like this: #block-yui_3_17_2_33_14884356287498_9144 p {color: #000000} "p" targets body text, and "h1", "h2", and "h3" target the different headings. Use that after the block ID (with a space) and before the curly bracket "{}".
  17. Honestly, this is the solution I like best for my site, but I have Image Blocks and Text Blocks offset from one another: .sqs-block.image-block { margin-top: -8px; margin-bottom: -8px; padding: 0; } This allows my Image Block corners to touch when they're in different rows, without overlapping any of the content (see screenshot).
  18. @paul2009 @octopusI'd recommend using this Chrome browser extension to find the collection ID and Block IDs for you: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
  19. To adjust the width of all Button Blocks, despite the text length, use one of these within the CSS Editor: For "small" buttons: .sqs-block-button-element--small {width: 110px !important;} For "medium" buttons: .sqs-block-button-element--medium {width: 110px !important;} For "large" buttons: .sqs-block-button-element--large {width: 110px !important;} You can also adjust the number before "px" to change the width. The "small", "medium", and "large" sizes are determined by the 'Size' options within the Button Block settings.
  20. There are missing colons in the answers above, try this: .sqs-block { margin-left: -30px; margin-right: -30px; margin-top: -30px; margin-bottom: -30px; }
  21. 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/
  22. @socialitestylePlease fix the missing colon after "margin-top" when you get a chance for users that may not notice why the code isn't working when they first paste it in! :)
×
×
  • Create New...