Beyondspace

1 hour ago, Webmaster_for_ZLC said:

Dear Forum Hero's,

Customer service said that my problem is actually normal behavior, but a solution might be available in the forum.

The navigation menu turns into the hamburger menu even when there's plenty of room to display the full navigation menu. The problem can best be illustrated by the attached screen capture.

If you're viewing the site in landscape mode on an iPad, the navigation menu is available. But switch to portrait mode on an iPad, and the hamburger menu takes over, despite the fact that there's still plenty of room for the full navigation menu. Can CSS code fix this issue?
Site: https://www.zlcb.org/

Thanks in advance for any input,
Brent

You can try the following css code

@media only screen and (max-width: 767px) {
  .header-display-desktop {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .header-display-desktop {
    display: flex;
  }
  .header-display-mobile {
    display: none;
  }

  .header .header-title-nav-wrapper .header-nav {
    display: block;
  }
  .header-layout-nav-right .header-title{
    flex: unset !important;
  }
  .header-burger  {
    display: none 
  }
  .header .header-announcement-bar-wrapper {
    padding-top: .1vw;
    padding-bottom: .1vw;
    padding-left: 3vw;
    padding-right: 3vw;
  }
}

3 hours ago, ChuckG-Art said:

 

Can you share your site so I can check?

6 hours ago, Ianthe said:

Here is the shop page https://www.ianthe.house/our-properties. I have set it as single column for now, as single column looks better on the product category pages, given we have just one product per category. 

However, I would love to see three columns on the shop page so our three products are side by side (the single column view for the product page shows images that are way too big for what I would like to see!), and just one column on the category pages, to display our single product per category without leaving excess white space for columns where additional (currently non-existing) products might be. 

The issue seems to be that the shop and category pages follow the same structure by default. 

 

Thank you so much for your help, its sincerely appreciated.

From your description, I understand that:

- On Our Properties — Ianthe House, you need 3 columns (side by side)

- On the categories pages (children of Our Properties — Ianthe House), it still keeps 1 column

Is it correct? If it is, you can try the following CSS code

@media only screen and (min-width: 768px) {
  .nested-category-children ~ .products-flex-container .list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

My testing

Shop page

Categories Page

Hope it can help

20 hours ago, afinocchiaro said:

 

The home slideshow and page banners are cropped in mobile view in the Margot template. Is there a code or feature that will make the photos fit the width of the mobile. 

 

Thank you! 

Can you give your site so we can take a look?

21 hours ago, john.smith said:

Banner is positioned behind the header nav.  How can I move it down so it starts at the bottom of the nav bar unless the user scrolls, then it moves behind the nav bar and up?

Can you share your site so I can take a look?

20 hours ago, rati_fegihi3 said:

The header is hidden on desktop, but remains visible on mobile at https://justine-ambat.squarespace.com/. How can I hide it across all devices?

I can not see the header on mobile now. Have you figured it out?

8 hours ago, RClark_Moja said:

Hi All, 

Can anyone advise how I add a button with the scrolling bar? So the Buy Now is a button rather than text? Even better if there is a code that pins the scroll at the bottom of the page so it is always visible. 

TIA 🙂

Can you share your site and the final result you want to achieve?

18 hours ago, Tom1414 said:

Hi, 

For the life of me I can not seem to find any Code that would help me change my main intro image when hovering over a text underneath the image. 

here is an example of a site using it effectively and what I am trying to do: https://www.shanademcallisterfisher.com/

 

Would anyone have any CSS suggestions?

 

You can try using the portfolio page with the hover background Layout. This layout has similar effect as the website you give example

4 hours ago, Ianthe said:

I have only three products in my store. 

I want to display all three products in three columns on my store page. 

On category pages, I want to display only one column (for my one product per category) 

 

Please can you help? 

Can you share the direct links to those pages so I can take a look?

For the mobile, you can try the following Css code

@media only screen and (max-width: 767px) {
  .gallery-masonry-item-wrapper {
    height: auto !important;
  }
  .gallery-masonry-wrapper.gallery-masonry-list--ready {
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
  }
  figure.gallery-masonry-item {
    position: relative !important;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    transform: unset !important;
  }
  .gallery-caption-content {
    position: relative;
  }
  .gallery-caption.gallery-caption-grid-masonry {
    width: 100%;
    max-width: unset;
  }
  .gallery-masonry-item-wrapper a:after {
    content: unset;
  }
}

My testing

My testing

7 hours ago, christined said:

 

Hi, all. I asked this last week in a resolved thread and am thinking maybe I need to create a new post ...

I have experimented with various versions of CSS code to implement a hover caption on masonry grids in 7.1. Had best luck with code in this thread, but I have a couple issues -- 

• when I am not hovering over image, I can see a faint/small version of the caption on the image (see screenshot)
• Mobile - I know hover doesn't work on mobile screens. Struggling to figure out  CSS so that always displays caption (beneath image) on mobile. 
   

I am using Masonry Grid in portfolio pages.

angelaart.net/work

pw angela

 

Any advice for how to tweak my css to resolve these things?

Thanks for any help you can offer!

Christine

 

 

For desktop view, you can try the following code

@media only screen and (min-width: 768px) {
  .gallery-masonry-item .gallery-caption-content {
    visibility: hidden;
  }
  .gallery-masonry-item:hover .gallery-caption-content {
    visibility: visible;
  }
}

6 hours ago, christined said:

 

I implemented footer injection script shared in this thread but am getting inconsistent results with nav showing on right side -- it is either hidden or in wrong color, and varies from page-to-page, whether or not I am logged in, and between Safari and Chrome. 
 

I currently have this in footer injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+2) {
    margin-right: 4vw;
}
</style>

And these screenshots show the two nav items on right either missing or in black. (Interestingly, on the pages where the words News and Commissions aren't visible, I can still click that area and link to the page... words just don't show.)

The site is: angelaart.squarespace.com
pw: angela

I sincerely appreciate any advice anyone can share!
Christine

 

I find thé following code make that navigation on the right disappear

You can try the following code to overwrite it

.header-nav-item.header-nav-item--collection  a {
  opacity: 1;
  color: var(--solidHeaderNavigationColor);
}

Hope it can help

53 minutes ago, drewdp said:

My homepage is a gallery section (slideshow: simple). I would like the central image to be a bit smaller and further down (centered vertically on the page). Is it possible to do this with custom CSS?

https://www.drewdepinto.com/

Thanks!

You mean this section to be moved down a bit? 

2 hours ago, orkoellis said:

I want to switch out/rotate logos like this section on the SS site. See the attached screenshot for the section I'm referring to. Does anyone have a recommendation for code or a plugin?

https://www.squarespace.com/website-design

I check that there are some effects at this section:

- Hovering logo would switch to a new one

- After an amount of time, one of the logos is automatically switched to the new one.

Which one do you want to proceed with? It requires javascript to run, do you have the business plan or above?

9 minutes ago, SelwynGoodman said:

Sure.

www.selwyngoodman.co

 

Thank you! 

You can try add the following custom Css code

@media only screen and (max-width: 767px) {
  section[data-section-id="65b24e50b427163099b47c10"] .products.collection-content-wrapper .nested-category-children {
    padding-top: 0;
  }
  section[data-section-id="65b24e50b427163099b47c10"] .nested-category-title {
    padding-top: 10px;
  }
}

41 minutes ago, SelwynGoodman said:

What the title says.

i just need to spacing to be reduced where it’s highlighted. I also only need this for mobile, not desktop, as the spacing is fine on desktop. 

Can each category also have the same spacing also, thank you in advance! 

 

Can you share your site so I can take a look?

My testing

2 hours ago, SquareQuestions said:

I want the Featured Image to be on the right, and the text content (meta data, date, title, context) to be on the left.  Similar to the desktop view.

If that is not possible, I would prefer the Featured Image to appear below the text content.

Thanks in advance!!

Try the following code for mobile view

/*Mobile arrange - meta data - image below*/
@media only screen and (max-width: 767px) {
  .blog-side-by-side .blog-item{
    display: flex;
    flex-direction: column;
  }

  .blog-item-summary {
    order: 0;
  }
}

Let me know if it works properly on your site

@ughnett Could you try the Event settings and let me know if it is working well for you? 🤓

Mar-2024 Update: ⏰

The new Calendar picker now can be accessible in Blog Post and Event Settings, allow you to edit the publish date of events as well! Now it can be found on

• Blog post Status dialog

• Event Status dialog

• Event Start and End time dialog

4 hours ago, SquareQuestions said:

I am trying to get my website to display as a side-by-side blog on mobile devices.  It likely needs CSS code, and I am having a tough time figuring it out.

https://www.fluencyfinance.com/all

password: Test1234

Thank you!

Which parts do you want to set them side by side on mobile?

Can you describe more detail?

Can you share your site so I can take a look?

Squarespace's Marquee block doesn't inherently support adding separate links to individual items within the block. 

You can refer to using the code block on the following post:

Do you mean showing the image caption when Lightbox opened like this?

Besides, what is the plan that your Squarespace site is currently subscribed to?