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

brandon

Circle Member
  • Content Count

    2,212
  • Joined

  • Last visited

  • Days Won

    29

Everything posted by brandon

  1. You are correct that page header injection puts the code in the body element, not the head element. I guess that's why Squarespace calls it "header" and not "head". It may not be your actual "header" but it does get injected as the first element within the body . Having said that, you can insert code into the head tag using settings > advanced > page header code injection and then write the Javascript such that it will only apply to a specific page. Are you able to provide details regarding the specific code you want to insert and on which page (along with a link to the site/page)?
  2. @starburst5654: It looks like you've got it sorted. Looking at your site, everything looks in order to me. If that's not the case, let me know.
  3. Hello. Add the following CSS via the CSS Editor: @media only screen and (max-width: 768px) { #block-8fc91e9563250a77172c { display: none; } } Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  4. Nice! Thanks for posting. Side note: I converted your Answer to a Comment (it's easy to accidentally post an answer instead of a comment). Up-voting useful answers is also helpful. Best!
  5. Hey, now we're getting somewhere. See my latest (and hopefully final) update to the answer. I attached another screenshot (samebuttons2.jpg) to the answer so you can preview what it will look like.
  6. No problem. If that doesn't work, I just updated my answer one last time. It also has an image attached that shows the end result.
  7. Yeah, sure. Just combine both answers. In other words, keep the CSS that I gave you (which will match the width), but also use the NEW answer (which will match the height).
  8. FYI: "Height" is the word you are going for. HTML elements are defined in terms of width and height. Length is not as easily understood, and should therefore be avoided in communication of this sort. I updated my answer. Let me know how it works for ya.
  9. It seems I'm not understanding the problem. Here is what I see in the screenshot: Both buttons are the same width. The text "Existing Customers" is on it's own line (within the button) As far as I can tell, that is what you requested. Are you saying you want "Existing Customers" to be outside of the button entirely? Can you explain what else about the screenshot is not right?
  10. Hi. What operating system, browser and browser version are you using?
  11. Latest Answer: Okay, here's what you want. I attached another image (samebuttons2.jpg) so you can see. .homepage .sqs-block-button-element[href="/pickupdelivery"] { padding-top: 1.75em; padding-bottom: 1.75em; } .homepage .sqs-block-button .sqs-block-button-element--small { width: 100%; max-width: 290px; box-sizing: border-box; } Old Answer #3: - Remove the previous CSS I gave you originally. - Remove the text "(Existing Customers)" from the second button - Do not add another text block below the button. Instead, we'll add the text with CSS so that there won't be a gap between the button and the text. - Add the following CSS to the CSS Editor: .homepage .sqs-block-button + .sqs-block-button .sqs-block-button-container--center:after { content: "(Existing customers)"; display: block; color: black; } .homepage .sqs-block-button .sqs-block-button-element--small { width: 100%; max-width: 250px; box-sizing: border-box; } See attached image (samebuttons.jpg) for what this does. Old Answer #2:Assuming that you want the buttons to be the same HEIGHT and that you don't care about them being different WIDTHS, I would recommend editing your button block for the second button, removing the text "(existing customers)" from the button, then adding the text "(existing customers)" to a new text block below the button block. Then center the "(existing customers)" text within the text block. Old Answer #1:Hi there. Give this a try, inserted via the CSS Editor: .sqs-block-button .sqs-block-button-element--small { width: 100%; max-width: 290px; box-sizing: border-box; } Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  12. Sorry @FMRF. I should have noticed that you're not the original poster! Of course, you can't accept it if you're not the original poster. Not sure how I missed that...I was going through older questions and must have gotten confused as to who asked what.
  13. Nice! Yeah that'll work too; thanks for letting me know. -Brandon
  14. That's true. When I said "...the simplest thing to do..." I suppose I neglected to consider simply making the table horizontally scrollable. Obviously this has its own disadvantages (as all approaches do) but it does get the job done! -Brandon
  15. No, the element references are specific to Brine (and possibly Brine's related templates).
  16. Hi there. One option is to add the gif as a background image on the image's containing element. When the image loads, it will cover up the gif (although the gif is still there, just not visible). Something like this, added via the CSS Editor, substituting your own gif file: .summary-thumbnail { background-image: url("https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif"); background-position: center; } Or, here's another option using just CSS: .sqs-block-summary-v2 * { position: relative; z-index: 1; } .summary-thumbnail:after { content: " "; height: 60px; width: 60px; -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; display: block; position: absolute; margin-left: auto; margin-right: auto; top: 40%; left: 45%; border-top: 0.2em solid rgba(200, 200, 200, 0.5); border-right: 0.2em solid rgba(200, 200, 200, 0.5); border-bottom: 0.2em solid rgba(200, 200, 200, 0.5); border-left: 0.2em solid #ffffff; border-radius: 50%; } @-moz-keyframes spin {100%{-moz-transform: rotate(360deg);}} @-webkit-keyframes spin{100%{-webkit-transform: rotate(360deg);}} @keyframes spin {100%{-webkit-transform: rotate(360deg); transform:rotate(360deg);}} Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  17. Ok, I updated the code. It works now. The only problem I see is that this doesn't show the announcement bar on mobile. In order to change that, the code would need to be refactored a bit which would take time. That combined with the fact that the OP never responded means I probably won't get to this.
  18. A few comments: I would change your class "column" to "cell", since that's more accurate. No biggy though. The quest for "responsive tables" is an ambitious one. On mobile, you can only fit a few cells wide and only if the text isn't too long. Here are some solutions that others have come up with to deal with it. I suppose the simplest thing to do would be to add a media query and break the cells into stacking blocks. Like this. @media only screen and (max-width: 860px) { .column { display: block; width: 100%; border-bottom: 1px solid white; } } Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  19. On second thought, Caroline, simply try using the code I provided but instead of "content: NEXT" and "content: PREV" use "content: >" and "content: <".
  20. Hi Caroline. I would post a new question with your description and a link to the page in question. Then you can comment on your question with @BrandonW (case sensitive) and I'll be notified and will try to take a look. It could be that your template requires slightly modified code.
  21. Hi there. Give this a try. Insert the following CSS using the CSS Editor. /*Reorder category list items on Montauk*/ /*http://caniuse.com/flexbox*/ /*http://shouldiprefix.com/#flexbox*/ #collection-5719735837013bf7bb9fc122 .category-nav-links { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ -webkit-justify-content: space-around; /* Safari 6.1+ */ justify-content: center; } /*Set the order of each list item ('li'), starting from the second child (first child is not displayed)*/ /*"All"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(2) { order: 1; } /*"General"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(3) { order: 6; } /*"Hair"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(4) { order: 2; } /*"Hair Care"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(5) { order: 4; } /*"Nail"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(6) { order: 5; } /*"Wig"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(7) { order: 3; } @media only screen and (max-width:640px) { #collection-5719735837013bf7bb9fc122 .category-nav-links { -webkit-flex-flow: column; flex-flow: column; } } Keep in mind that if you add or remove categories, you'll have to change the "order:" values accordingly. Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  22. Cool man; glad that worked. You deserve some credit for your very clearly articulated question. That makes a big difference when it comes to unique requests.
  23. Another option may be to float the images instead of making distinct columns for them. I believe that then the images will always be first in the document flow even when floated to the right. This would of course cause the text to flow around the image, rather than staying within its own column which may or may not be desirable to you.
  24. Keep in mind that this code is very specifically written for your current row/column/block arrangement. If you rearrange things, this code would have to be refactored. But this at least shows it's possible (and not that difficult) to do, and gives you a pattern to follow if you need to modify it in the future. Reference: http://stackoverflow.com/questions/220273/
×
×
  • Create New...