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


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by alxfyv

  1. @adeuitch: So as not to hijack @sira's question with material not directly responsive to it, if you will pose a separate question of your own and leave a comment here with the question title and url, I will try to help. Try to decide on what effect you want for your site and pose your question as how to get that. Don't forget to give your template name and site url. As examples of the kind of hover effects that can be achieved, see Hover.css and CSS Image Hover Effects.
  2. @castigliano: Hi Christine, So as not to hijack this question, and to keep it a clean thread, would you please post your issue as a separate question? Then leave a comment here with the url to and title of your question. I will try to help. Thanks for your understanding. -Steve
  3. You might try copying and pasting this in Design > Custom CSS: /* ** in gallery grid, set a hover over slide effect to ** display slide title on partially transparent ** overlay */ .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper .image-slide-title { position: absolute; bottom: 0; width: 100%; height: 0; color: white; background-color: rgba(194, 194, 163, .8); opacity: 0; transition: all .25s ease-in; } .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper:hover .image-slide-title { height: 40%; opacity: .9; } This should give you the effect, on hover over a slide, of a partially transparent overlay sliding up over the image and displaying the slide title. Let me know whether this works and, if so, whether it's the type of effect you have in mind. -Steve
  4. To help with code specific to your site and limited to affecting only the links you want to affect, one needs the site url. Consider editing your question (click on the small cogwheel icon to the right of the question title) to give this.
  5. To help, one needs the site url. Consider editing your question (click on the small cogwheel icon to the right of the question title) to give this.
  6. It's my pleasure. :-) The pen was not a lot of work. I already had the base code which I developed when I needed an <iframe> for my site. All I did was fork it and change a few lines. I've given an answer below with the code so you don't have to use the pen. Use the code below and it should be fine. Let me know one way or the other. -Steve
  7. Put the following in the embed block: <div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz"> <div class="responsive-wrapper responsive-wrapper-wxh-550x2000"> <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true"> <p style="font-size: 110%;"><em><strong>ERROR: </strong>An iframe should be displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe> </div> </div> Put this in Custom CSS: #Iframe-Liason-Sheet { max-width: 550px; max-height: 2000px; overflow: hidden; } /* inner wrapper: make responsive */ .responsive-wrapper { position: relative; height: 0; /* gets height from padding-bottom setting */ -webkit-overflow-scrolling: touch; overflow: auto; } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; } /* padding-bottom = h/w as a % */ .responsive-wrapper-wxh-550x2000 { padding-bottom: 363.6364%; } .iframe-border { border: 1px solid #000; } .center-block-horiz { margin-left: auto !important; margin-right: auto !important; } I have it working with this code on this /test page on my site. I'll leave the page up for awhile. I'll leave the pen Responsive-Iframe-REF up on CodePen permanently. There is some extra height and some horizontal scroll at desktop/laptop sizes. I've been unable to modify this as the <iframe> won't display at any size other than 550x2000. It's persnickety that way. I've not encountered one like it. If you want to provide additional styling, padding, margin, box-shadow, etc., put the class names in the <div id="Iframe-Liason-Sheet"> opening tag and add corresponding class rule sets in CSS. If you need help with further CSS or anything, let me know. In any case, let me know how it works. -Steve
  8. I converted your "answer" to a comment which is where these remarks should go. I replied to that comment which is what you are reading now. I checked it out on my iPhone and iPad Air and it seems to be fine. Your are right though that it's not behaving correctly on the desktop/laptop. Let me investigate some and I will get back to you. In the meantime, just double check that you have the HTML correct in the embed block and the CSS correct in the Custom CSS. My suspicion is that there is something in the CSS that needs adjusting. -Steve
  9. Do not set attributes in the <iframe> tag, especially width and height. Do it in CSS. All that's needed in the <iframe> tag is the src= attribute. You will find all the HTML and CSS needed to have a responsive <iframe> in the pen Responsive Iframe - REF on CodePen. See the comments (comments button on the lower left) for further explanation. The <iframe> is responsive in that at narrower window sizes it scrolls horizontally. Put the HTML in an embed block. Put the CSS in Design > Custom CSS. Keep or discard the CSS general styles setting border, box-shadow, padding, etc. If you have questions, leave a comment. In any event, please let me know whether it works and satisfies your needs. -Steve
  10. @jaydev: I too have Bedford. I adapted @BrandonW's code to work with Bedford. You may see it at this /test page. If it satisfies your needs, post an independant question specific to Bedford and mention me by my @_username reference. I'll answer with the adapted code. (Don't forget to give the url to your site in the question.) -Steve
  11. You might try changing the variable name 10th in lines 14, 27 and 35 to x10th and see if it runs then.
  12. I put your script, the first script with 'googleMap' as the id, in Esprima Syntax Checker. It says illegal identifier on line 14. The variable name 10th is an illegal variable name. Variable names cannot begin with a numeral. That variable name is used again on lines 27 and 35. Your script isn't executing because of that. Otherwise, the script seems to be OK.
  13. You need an opening <script type="text/javascript"> tag before line 7 and a closing </script> tag after line 39.
  14. For some reason, the contrary editor is not letting me comment today, so I'm putting this in an answer. Your CSS, line 42, is incorrect. Strike line 42; insert instead: #googleMap { width: 100%; height: 380px; } Line 42 is actually HTML with CSS styling inside the HTML <div> opening tag. You can't put that in Custom CSS; it'll give a syntax error. In the embed block, you want just <div id="googleMap"></div> I'm a novice autodidact in JavaScript. But I think line 9 is the reference to the HTML in the embed block where the map will go. Except in this case "map" should read "googleMap". Thus document.getElementById("googleMap") . As I said, I'm a JS novice; but I think your JS has syntax errors. It seems to me there are a lot of commas that either shouldn't be there at all or should be semicolons. Use an online JS syntax checker. A good one is Esprima Syntax Validator. Your statement in Step 3 is not quite correct. You don't make the map responsive with CSS. You do that with the HTML structure. Look at the HTML in MapBox. That's the kind of structure usually needed to make something like this map responsive. But what I would say first is just use the one line HTML above in the embed block. If the JS works and you get a map, then check it on mobile devices. If it is responsive, there's nothing else to do. If not, we'll work on getting to be. -Steve
  15. Ordinarily, it's best practice to keep HTML and JavaScript code separate. So although you can, you likely shouldn't put script and HTML in a code block. If you do, be certain to wrap the script in <script></script> tags. These are HTML elements that tell the browser that what follows in between them is not HTML but script code. In this case, rather than a code block for the HTML, I suggest an embed block. You're drawing material from outside your site into your site. That is what the embed block is for. Embed Blocks vs. Code Blocks. Using the Embed Block. The HTML in the embed block should be this: <div id="googleMap""></div> Do not use any of the other HTML you see in the TryIt editor. In Design > Custom CSS, put: /* style the Google map */ #googleMap { width: 500px; height: 380px; } You can, of course, add any additional CSS styling (border, padding, etc.) you would like. Put the JavaScript in Page Header Code Injection for the page on which you put the map. To reach Page Header Code Injection: from the Home menu, click Pages; select the page you want; click the cogwheel icon to the right of the page name; click Advanced. Enter the JavaScript in the Page Header Code Injection text area. It should look like this: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"> </script> <script type="text/javascript"> /* Google Map api */; ... the Javascript code here, in place of this line ... </script> Last October, I worked with another Squarespace user who wanted a responsive map in his site. If your map turns out not to be responsive, have a look at the code at the pen MapBox on Codepen. If you want to make your map responsive and need help, leave a comment here. I hope this helps. Let me know whether it does and whether you need any further help. -Steve
  16. OK. Redesign is always an option. :-) You should have said something. We could try writing a rule just for mobile sizes. If you do come back to it and want some help or input, just leave a comment here and use my username. Good luck.
  17. @Nyc10029: Sorry. I don't have the Forte template so I wasn't sure. I provided an answer that I hope will do what you want. If not, just let me know.
  18. Try this in Design > Custom CSS: /* style the logo (site-title) text color */ #logo .logo-text a { color: #ff0000; } /* style the main nav text color */ #topNav .main-nav li a { color: #00ff00; } /* style the main nav sub nav drop-down text color */ #topNav .folder .folder-child-wrapper ul.folder-child li a { color: #f7eeee; /* this is template default */ } /* ** style main nav sub nav drop-down ** menu background color */ #topNav .folder .folder-child-wrapper ul.folder-child { background-color: #111111; /* this is template default */ } I think this will do what it says. If not, or if you want something for the mobile nav let me know. -Steve
  19. @BrandonW: That's an excellent article on responsive tables. Thanks so much for finding and including it. :-) -Steve
  20. I checked the site. When I first landed on the Cover Page, the buttons were there and looked good. But when I reloaded the page the subscribe button was gone. Can't get it back no matter what I do. If you can get the Enter button on the left and the Subscribe on the right, I think I can get them to align nicely in a column using the CSS Flex Box technology. But for the Enter button to be on top in the column, it has to be on the left in the row. Let me know if I can help.
  21. I needed a responsive table (/test-table) on my site but could not have it break columns at mobile sizes, but rather display with horizontal scrolling. I put a <div> wrapper around the table and at the mobile breakpoint set the overflow-x: auto; property on the wrapper. Other properties are set to accommodate touch scrolling. If you care to, you can see the code at the pen Table Play on CodePen. It has only some data entered. It's only for development as the real data won't be available for some time. To see the code display in a visually formatted way, just copy it and paste it into a plain text processor. (I use BBEdit (Mac)). Ignore the JavaScript. It's there to dynamically populate the table with data and handle the modal dialog. It has nothing to do with the table structure or how the table displays. If you have any questions or need something further that I might provide, just mention me in a comment by username. I hope this is of some help. -Steve
  22. Can you get the Subscribe button on the right and the Enter Site button on the left? If you can, do so. Let me know either way. I'm sure there's nothing glitchy about your site. We'll get it working. Keep a separate browser tab open and navigated to your site as a visitor -- not logged in. When you want to test whether a change has worked, switch to that tab and reload the page. Be sure to click Apply and Save everywhere. In the meantime, I edited the answer. Try it as the page is right now.
  23. In Design > Style Editor there should be controls allowing you to do that. Making style changes. Making style changes FAQ.
  24. My mistake. You said Cover Page and I know better, just had a senior moment. :-) I edited the answer. To be used in Page Header Code Injection, the CSS needs to be wrapped in <style></style> tags. But I see you've inserted a third button. Can you put the Enter Site and EJ's Blog buttons on the left and the Subscribe button on the right? If so, I think I can give you a look you will like using Flex Box.
  • Create New...