ysong

@CassAggett I'm using a code to move my header arrows to the center of the image and unfortunately that code seems to make it disappear.

@CassAggett I've tried different ratios and they still show the space.

Site: https://hemlock-neversink.squarespace.com/ PW: loveandwar I am currently trying to use the summary block as an image carousel as 7.1 no longer has that feature. I would like to remove the space that is above and below the carousel images so it fills up the area that of the block. I am using a few codes but can't seem to figure out how to add a code to remove the space. Here are the codes that I am using... To prevent from clicking to the summary post: #collection-6466cdd37caf7d54b07e1e33 .sqs-block-summary-v2 .summary-item { pointer-events: none !important;} To move the arrows to the center of the image: #collection-6466cdd37caf7d54b07e1e33 .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { color: white; padding-left: 15px; padding-right: 15px; float: none; width: 100%; position: absolute; bottom: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9;} What I have right now: What I would like to achieve: Thank you in advance!

@tuanphan Hi! I used your above code on my site but need help with the positioning of the image. Would like to move the image to the right so it is not overlapping with the arrows. How would I achieve this? Thank you! Site: https://clotheslyne.squarespace.com/ PW: loveandwar

@Beyondspace Thank you! This worked perfectly! I decided to get rid of the blue background / card function, the black overlay and image doesn't match up. Is there a way to fix this?

@creedon Amazing! I updated to your most recent code so the buttons appears on mobile properly! Thanks 🙂 However, I'm still trying to figure out how to avoid the buttons from overlapping the logo when I resize the desktop to to be smaller. Is there a way to make the buttons stacked when the screen size is more narrow? Thank you!

@creedon Hi! Site: https://countryhousereskin.squarespace.com/ PW: 1234! Using some of your code I managed to get to the point where I have two buttons, but I'm facing some difficulty when the screen goes to tablet and mobile. Here's some screenshots to explain my situation better. 1. When I resize my browser to be smaller the buttons are overlapping the logo. Would you know how to prevent this? I would be okay with the buttons stacking as a column in tablet mode. 2. When in mobile mode the additional button doesn't appear. Am I missing a code? Thank you in advance!

@Beyondspace The password is 1234!

Site: https://countryhousereskin.squarespace.com/ Hi! I'm trying to figure out how to move the title + description + button text to appear on the images on hover. This is what I currently have: And this is what I am trying to achieve: Any help would be greatly appreciated! Thank you in advance.

A few follow up questions: 1. Is it possible to make this code only visible on the desktop version? 2. How would I make the logo be full height on the desktop version? (including screenshot) 3. How would I make sure the 2 navigation links are centered to the solid color area?

@bangank36 Thank you so much! This worked great!

Site URL: https://theharper.squarespace.com/ Hi! PW: theharpernyc I'm trying to using custom css to customize the form field. I managed to get the the form fields to be where I want it by using this code: For email & phone number: div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(2), .form-wrapper .field-list>div:nth-child(3) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(2) {margin-right:2%;}} For unit & budget: div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(3), .form-wrapper .field-list>div:nth-child(4) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(3) {margin-right:2%;}} For broker info: div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(5), .form-wrapper .field-list>div:nth-child(6) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(5) {margin-right:2%;}} And this is the result: However I am having a hard time trying to get each filed box to be the equal width & spacing like this: Ideally all the field would be equal width and height. Also, how what kind of code would I need to make this layout to be visible on on desktop? Thanks in advance!

Site URL: https://theharper.squarespace.com/ Hi! PW to site: theharpernyc A couple things I am trying to achieve using custom css that would appear only on the landing page: 1. Logo would be vertical and flush left. Would be responsive to the size of the window. 2. The navigation (will only have two pages linked) would be right above the vertical logo. I was able to flip the logo to it's side using this code: #header .header-title-logo { position: fixed; transform: rotate(90deg); background-color: white; padding:25px; } However I would like to make it full height and flushed left without cutting into the image. This is what I am trying to achieve: If anyone can help point me in the right direction of how to achieve this that would be amazing. Even if it's ideas. Thanks in advance!

Site URL: https://caviarbarlv.squarespace.com/ PW: caviarbar Hi, Using squarespace 7.1 I would like to rearrange the footer in the mobile version so the logo is at the very bottom. Right now, the logo is between the two text sections. However, I would like to keep it the same in the desktop version. Is this possible? Desktop version: Mobile version: (Would like the logo to come behind Make a Reservation) Thank you in advance!

Site URL: https://aria.squarespace.com/ Hi, Using version 7.1. I would like to overlay my description on the image but can't seem to find the code. Thanks in advance for the input. The description is below the image: What I am trying to achieve:

Site URL: https://aria.squarespace.com/ Hi, Using version 7.1. I would like to create a seamless gradient background for all the pages, including the portfolio page but excluding the footer. However, the code I am using is creating a gradient for each section. Here is the code I am using: .white:not(.has-background) .section-background { background-image: linear-gradient( to bottom right, #99cbc6, #e3ccc2 ) } Please help! Thanks in advance for the input. The gradient is applying separately to each section here: What I would like to achieve: