Ziggy

Yes, you can remove the first section top pushing with CSS can you share your website URL?

You need the section height to be set to L or it won't sideways cover the full height if the screen. 

How have you set the checkerboard?

Can you share your website URL?

Hi Sibylle, can you share your website URL?

Potentially, but the title and arrows are in a different elements so will be difficult to align accurately and consistently.

Add this to Custom CSS:

.user-items-list-item-container {
  display: flex;
  flex-direction: column-reverse;
}

I'm really not sure what's going on there. It looks like you have a lot of custom coding, what happens when you disable that in safe mode?

Can you share your website URL so I can test it myself?

9 minutes ago, Pally said:

#collection-663303ab277bab3ab56122c1{
.field-list {
display: flex;

Have you closed the brackets on this code in your CSS?

The elements are in a flex grid, so using flex-direction: column-reverse; will be the CSS property you need. If you change the setup on your website I can provide the full code.

If you set them to below you can use CSS to change the order of the elements to place the arrows at the top instead.

2 minutes ago, Knoxx said:

Thank you!

Pleased to help!

On 4/27/2024 at 2:39 AM, please said:

homepage shows on google search console that it has a redirect

Do you mean the page URL ~ domain.com/homepage isn't being indexed or domain.com?

I often find that the block order in the HTML code is determined by the order in which the blocks were created not the order they are in on the page. If that's correct, then the order that the accessibility focus outline appears in will follow that same path and the way to correct it will be to systematically add blocks in the order in which you want to be able to tab through the content. This might involve rebuilding sections. 

Try contacting Squarespace Support to get assistance with this:

https://support.squarespace.com/hc/en-us/requests/new

Can you share your website URL?

Can you mark my post as the solution and give it a like?

Try this CSS:

@media screen and (max-width:767px) {
  .user-items-list-item-container[data-section-id="663149d7ee4b47248ba89534"] ul {
    min-height: unset !important;
  }
}

It's very odd that it's not giving you that option. I would suggest contacting Squarespace Support to get some help with this:

https://support.squarespace.com/hc/en-us/requests/new

Do you have any other style code that might be overriding these tweaks?

Hmm, not sure why that wasn't excluding the other elements, try one of these:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slides {
    width: 98%;
  }
}

Or this:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 24px;
  }
}

This could be tricky to fix but the first step would be to test if the issue resolves without the code running, you can use this method:

https://bycrawford.com/blog/disable-scripts-in-edit-mode-on-squarespace-how-to-activate-safe-mode

Could you share your website URL?

It is not eligible to transfer because you have only just purchased it, you need to have had it for 60 days before transferring it. That said, you don't need to transfer it, you can simply connect it instead. Select connect domain rather than transfer:

https://support.squarespace.com/hc/en-us/articles/206541747-Connecting-a-GoDaddy-domain-to-your-Squarespace-site

12 hours ago, sINK said:

(it does what I hoped it would do), but it screws up the sidebar category placement on desktop.

If you wrap the entire code in a media query it wont affect the desktop view:

@media only screen and (max-width:767px) {
  // Show category nav links 
  div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
  }
  .nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
  }
  nav.nested-category-breadcrumb {
    display: none !important;
  }
  ul.nested-category-children {
    display: none !important;
  }
  li.category-item:first-child a {
    padding-bottom: 0 !important;
  }

  div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
    padding-bottom:0px!important;
  }
}

The CSS doesn't appear to have been saved as I can't see it in the code on your website, did you remove it?

Try this in Custom CSS:

@media only screen and (max-width:767px) {
  .user-items-list-banner-slideshow .slide {
    margin: 0 8px;
  }
}

I don't see that text anywhere on your website.