Jump to content

AndyKhouri

Circle Member
  • Posts

    18
  • Joined

  • Last visited

Reputation Activity

  1. Thanks
    AndyKhouri reacted to tuanphan in Fixed Background Image & Effect in 7.1   
    Add to Test Page Header
    <style> body { position: relative; } footer#footer-sections { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; } footer.sections section, footer.sections .section-background, .section-border { background: transparent !important; } </style>  
  2. Like
    AndyKhouri reacted to tuanphan in Fixed Background Image & Effect in 7.1   
    This is Page ID. body#collection-63b52509674da0330e64198b
    To include More ID, use this format 
    body#collection-63b52509674da0330e64198b, Page-ID-2, Page-ID-3
    Follow this guide to find Page ID. 
  3. Thanks
    AndyKhouri reacted to tuanphan in Fixed Background Image & Effect in 7.1   
    Add to Design > Custom CSS
    body#collection-63b52509674da0330e64198b { & { position: relative; } footer#footer-sections { position: absolute !important; bottom: 0; left: 0; z-index: 999; width: 100%; margin: 0 !important; } #siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] , #siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] .section-background, #siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] .section-border { background: transparent !important; } div#siteWrapper { position: relative; } }  
  4. Like
    AndyKhouri reacted to tuanphan in 7.1: line break for gallery grid captions   
    You can use some code like this (Add to Page where you use Gallery)
    <style> /* this is code to style 2 lines */ .image-slide-title { font-size: 30px; color: red; line-height: 30px; } /* this is code to style first line */ .image-slide-title:first-line { font-size: 20px; margin-bottom: 20px; } </style> In CSS code, there is no attribute to target line 2, 3...but only attribute to target first-line, so I use the above method.
  5. Like
    AndyKhouri got a reaction from tuanphan in Page sections/color to fill page   
    I think I figured this out. If you put this code into the header code injection, you use a single gradient underneath all sections. And when you copy the code and adjust it for a different page, it affects only that page. Just replace my gradient particulars with your own.
     
    <style>
     .site-wrapper {
          background: linear-gradient(100deg, #000000, #ffffff)!important;
      }
    </style>
  6. Like
    AndyKhouri reacted to tuanphan in 7.1: line break for gallery grid captions   
    Gallery Title doesn't allow HTML tag. If you share link to your site, we can give a script code to make <br> tag work.
    You can also add this code to Settings > Advanced > Code Injection > Footer first, if it doesn't work, share link then.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".image-slide-title").each(function(){ $(this).html($(this).text()); }); }); </script>  
  7. Like
    AndyKhouri reacted to tuanphan in Page sections/color to fill page   
    If you use a Business Plan or higher, no need to find collection/section id, just add this code to Page Header
    <style> .section-background, .page-section, .section-border, body { background-color: black !important; } </style>  
  8. Thanks
    AndyKhouri reacted to tuanphan in Disabling Portfolio Project Pages in Squarespace Version 7.1   
    Use this new code
    /* .slide hover */ .slide a:after { content: ""; display: block; background: rgb(128, 0, 128, 0.5); position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: all 0.3s; } .slide:hover a:after { opacity: 1; transition: all 0.3s; } /* Show overlay on hover */ .slide:hover .image-slide-title { opacity: 1; } /* move title over overlay + hide it initial */ .image-slide-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70%; text-align: center; color: white; opacity: 0; z-index: 1000; transition: all 0.5s; pointer-events: none; white-space: initial !important; }  
  9. Like
    AndyKhouri got a reaction from tuanphan in Portfolio grid Overlay add vertical spacing   
    I managed to answer my own question but it wasn't very intuitive, so I'm sharing the solution here in case anyone else ever runs into it. 
    If your grid spacing is messed up and the slider controls aren't helping, highlight the parameters next to the slider and then manually punch in the pixel count for your vertical and horizontal spacing and it'll force the proper formatting. Not sure if this is a glitch or if I messed up somewhere, but this worked. 
  10. Like
    AndyKhouri reacted to paul2009 in Site Widths Not Consistent Across iPad, Desktop, and iPhone   
    This is a known issue with the new "Fluid Engine" layout tool. There are, as you will have seen, two distinct and separate layouts for mobile and desktop but there isn't a tablet specific layout yet so avoiding layout issues on tablet and smaller-sized screens can be difficult unless you lay the page out specifically to avoid this issue. Of course this isn't always possible. 
    Squarespace employees don't routinely monitor this forum for feedback (see the guidelines - item 6) so to pass this feedback to Squarespace, please open a support ticket with Squarespace Customer Care.
  11. Like
    AndyKhouri got a reaction from paul2009 in Site Widths Not Consistent Across iPad, Desktop, and iPhone   
    Site URL: http://andykhouri.com
    I fear this may be a stupid question but I haven't found it anywhere else yet, so I'm taking the plunge. 
    Screenshot 1: My site in Desktop.
    Screenshot 2: My site in Tablet.
    Screenshot 3: My site in iPhone.
    Desktop and iPhone look perfect, but the Tablet view is messed up. I used a custom code to disable the mobile navigation, but the text and portfolio widths are full bleed, rather than conforming to the dimensions seen in Desktop and iPhone (the width of the header, basically). This problem is consistent across every page on the site seen on Tablet; everything pushes right up against the edge of the screen. 
    I think the simplest solution would be to disable mobile view on the tablet completely, but I don't know if there's a code for that. Perhaps there's a code to force the tablet view to keep all content within the width of the header?
    andykhouri.com; site is live and should be visible to everyone. 
    Thanks for any help!



  12. Like
    AndyKhouri got a reaction from tuanphan in Using a different aspect ratio in the different gallery page   
    Just want to say thanks so much for this! It was a live saver. 
  13. Like
    AndyKhouri reacted to tuanphan in Using a different aspect ratio in the different gallery page   
    Try this
    <style> .portfolio-grid-overlay .grid-image, .portfolio-grid-overlay .grid-item { padding-bottom: 100% !important; } </style>  
  14. Like
    AndyKhouri reacted to creedon in Increase column number from4 to 5 for portfolio page on 7.1   
    I updated my code cited in my October 25, 2021.
  15. Like
    AndyKhouri reacted to creedon in Increase column number from4 to 5 for portfolio page on 7.1   
    The reason it isn't working is you installed the code in Design > Custom CSS. The post says to install in Portfolio Settings > Advanced > Page Header Code Injection for the portfolio page.
    You can install the code in Design > Custom CSS if you remove the style tag.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.