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


  • Posts

  • Joined

  • Last visited

Everything posted by roem

  1. Worked perfectly--thanks!
  2. Hi @tuanphan, Thanks for the response. Is there a way to do this without Header Code Injection? I don't have a business plan. Thanks!
  3. Currently, Squarespace only allows you to choose between 400 and 700 for the Montserrat typeface. When I use the CSS editor and type in "h1 {font-family: "Montserrat"; font-weight: 600;}, it either changes it to 700, or 400 if I put type in "500". How do I enable Squarespace to allow more font weights for Montserrat? Thanks!
  4. Hi @tuanphan, I don't have things ready on my real site, but I created a page on my test website that has the layout I want on my real website. As you can see, I just want the grey text boxes shown below to maintain equal height at all screen widths (I outlined the row in question in red). How do I make the grey text boxes maintain the same height? I'm hoping your answer will be enough for me to reference it on my real website. Website link: https://cobalt-endive-6g42.squarespace.com/ Website password: 123
  5. Hi all, I'm just wondering how you go about using CSS to make changes to specific rows on one's website. For instance, I'm trying to target a row of text boxes so I can make them maintain equal height at all page widths using display: flex. I previously got help from @tuanphan(thank you) but the code and elements Tuan targeted don't apply to my real website. Meaning, when Tuan targeted a row using .span-12>.row on my test website, the same code does not work on my real website. So I'd just like to know how to target certain rows on any website. I can't find any mention of targeting rows anywhere online so far. Any help would be appreciated! Thanks
  6. Hi @tuanphan, Here's the link to the page: https://cobalt-endive-6g42.squarespace.com/ Password: 123
  7. Hi @tuanphan, Thanks for your response, your fix works, but only with a single row. I've created a new page on the test website that shows exactly what I will try to do on my real website. I tried to use your fix from your response on the new website page, but it doesn't seem to work. As you can see in the below image, the text boxes aren't the same height. By the way, these text blocks are part of the image columns, and I just set "margin-top: -35px" to eliminate the gap between the text and image blocks. How do I make the text blocks maintain equal height on this page? Thanks again!
  8. Site URL: https://cobalt-endive-6g42.squarespace.com/ Hi all, I'm trying to figure out how to make three text blocks--arranged side by side--maintain equal height as you resize the browser. I haven't been able to find many posts that address this issue, though I keep seeing "display: flex" brought up as a potential solution. I've been playing around with it for a few days and haven't come up with anything. As you can see in my screen shot, I just want the red part of the other two text blocks to always match the height of the the third one. Simply adding in something like "height: 200px" doesn't work because it's not responsive. Any help would be appreciated! Site Password: 123
  9. Hi @floraparthneium, I'm unable to figure out how to properly edit the CSS on your site merely in the command console; it'd probably be easier to do in your Squarespace CSS editor. Given that your image is a different type of image than mine, I don't know exactly how to replicate the effect. I can however offer a different solution--one I was going to use had I not figured out the above solution to my problem. What we are going to do is have a cropped image that replaces the original desktop image as soon as your website goes into tablet or mobile view. All you have to do is take your "barnabas poffley" image and crop it in Photoshop (or any image editor). Just crop it down to the width you'd want it to have on mobile or tablet view. Then you: 1. Create an image block right below your original one and upload your newly edited cropped picture. 2. In your CSS editor, you need to use media queries to control when you want your cropped picture to appear and disappear. Same goes for your original image. To make your new cropped image disappear in desktop view, enter: @media only screen and (min-width: 834px) {#block-id {display: none;}} To make your original image disappear in mobile view, enter: @media only screen and (max-width: 834px) {#block-id {display: none;}} So what happens is as soon as your website resizes to a width greater than 834px (switching into desktop view), the cropped image disappears and the original image reappears. Once the browser width falls below 834px, the original image disappears and the cropped image appears. Just make you you enter the correct image block id number into the "#block-id {display: none;}". If the strings of code end up flipping which image shows at mobile and desktop views, just change "min-width" to "max-width", vice versa. I'm pretty sure I gave you the correct order though. I hope this workaround helps!
  10. I figured out the answer to my question. The CSS I used is pasted below. To change the height, just change the height value of the first chunk of code. .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-inset{ position: relative; width: auto; height: 400px; padding-bottom: 0px !important; } .sqs-block-image img{position: absolute; width: auto; height: auto !important; object-fit: cover;}
  11. Site URL: https://seadragon-poodle-hstd.squarespace.com/ Hi all, I have a page on my test website that features a poster image block. The image is pretty wide and has a narrow height, which looks perfect on a desktop screen. However, when the page is scaled down to mobile view, that wide and narrow image block looks very small due to it maintaining its original proportions. I want it to act like a banner image on Squarespace 7.1, where the banner image doesn't really shrink, but everything else does (otherwise you'd be left with an extremely narrow banner image). I've attached an image that shows the problem. Any advice would be appreciated! Site Password: 123
  12. Hi bangank36, That code doesn't seem to work either. The white margin still appears on the right. Same for the "About" page and "Contact" page. The only page that looks good is the "Portfolio" page for some reason. On the "Contact" page, the footer isn't even hitting the bottom either. I've inserted two pictures below. *EDIT: I seemed to have fixed the right-side margin problem by going into "Site Styles" and switching the "Page Width" from 1800px to 100% (I had to manually type in 100%). The bottom margin still appears on the "contact" page though. And even though the width problem is solved, I'd still like to know why the manual CSS code wasn't working as well as why only the "Portfolio" page was working...any thoughts?
  13. Thanks so much, bangank36--that worked perfectly, but only on the portfolio page. Do you know why it's not applying correctly to the other pages?
  14. Site URL: https://cyan-snail-gt4d.squarespace.com/ Hi All, I'm trying to make the footer on my "test" website actually touch the bottom of the page, yet I cannot seem to make this happen. Using custom CSS to change the margin and padding doesn't work, although I'm able to get it to somewhat work if I make the #footer "fixed" as opposed to relative or absolute. My header is fixed aswell, and that actually makes it stick to the top and take up the true full width of the page. (Note: I'm using the Wexley template as a base) On both the header and the footer, if I change it from fixed to relative, all of a sudden the margins on all sides reappear--despite me setting the margins to 0px. Is there a way to make the footer touch the very bottom of the page and extend the full width of the page WITHOUT it being set to "fixed"? I've attached a screenshot showing the header, footer and red "X" marks on the sides and bottom to show the gap I would like to eliminate. I'd like the footer to look like the header without it needing to be fixed. Any help would be appreciated! (The password to the site is: 123)
  • Create New...