meganheath

Hi @Bluemonque

Try this instead

#siteWrapper .header-actions-action--cta .sqs-button-element--primary {
	font-family: 'Roboto Condensed';
    font-weight: 700;
}

Site URL: https://karaleighfordceramics.com/library

Hello,

https://karaleighfordceramics.com/library

I've used a gallery page on this 7.0 site to setup an image library. I've included a click through url on each image which directs to an external site. But I'm having an issue with the search bar on the gallery page.

If you click a thumbnail within the gallery page it opens the clickthrough url, but when you click a search result within the gallery page, it open the image in a lightbox., disabling the clickthrough url. I need the search result to open the clickthrough url.

Can anyone help please? Thank you.

Hi @Susi_GraphicDesigner

I just realised there was a formatting issue in the second set of code I posted. I've updated it so please replace with the following

/*Reduce bottom padding on Gallery Reel*/
	[data-section-id="616f34f81c1b653b4be9619d"].gallery-reel[data-width="full"]{
 		 padding-bottom:10px;
}

@media only screen and (max-width: 768px){
	/*Resize Home page Profile Image on Mobile*/
	#block-yui_3_17_2_1_1634676566210_22589.sqs-block-image .design-layout-inline .intrinsic  {
  		max-width:180px !important;
	}
  
	/*Resize Home Page Quotation image on Mobile*/
	#block-dd0c97de38e440742169.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Brands Page Quotation image on Mobile*/
	#block-1787f116911d83d2c802.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Journals Page Quotation image on Mobile*/
	#block-40f720ad897122564413.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Books Page Quotation image on Mobile*/
	#block-8e91dff71f53543a506d.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Portfolio-1 Page Quotation image on Mobile*/
	#block-6159e64c42253c7b6894.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
  }

Your code looks good 🙂 Well done. I think the issue is that the height of the sections where  you've placed "View my full Portfolio here" are different. On the Homepage the section height is custom while on the other pages it's set too small. Adjust your section height to the lowest option (10px I think) and see if this makes a difference.

Hope this solves it.

Hi @Susi_GraphicDesigner

You don't need to use developer mode to find block ID's. Here's a helpful article by Will Myers on how to find block ID's using the Chrome Inspector tool or a chrome extension. Hope this help.

To target the quotation images on the other pages replace the original code I gave you with this...

/*Reduce bottom padding on Gallery Reel*/
	[data-section-id="616f34f81c1b653b4be9619d"].gallery-reel[data-width="full"]{
 		 padding-bottom:10px;
}

@media only screen and (max-width: 768px){
	/*Resize Home page Profile Image on Mobile*/
	#block-yui_3_17_2_1_1634676566210_22589.sqs-block-image .design-layout-inline .intrinsic  {
  		max-width:180px !important;
	}
  
	/*Resize Home Page Quotation image on Mobile*/
	#block-dd0c97de38e440742169.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Brands Page Quotation image on Mobile*/
	#block-1787f116911d83d2c802.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Journals Page Quotation image on Mobile*/
	#block-40f720ad897122564413.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Books Page Quotation image on Mobile*/
	#block-8e91dff71f53543a506d.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Portfolio-1 Page Quotation image on Mobile*/
	#block-6159e64c42253c7b6894.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
  }

Hi @Susi_GraphicDesigner

Each image block as a unique ID so you'd need to add this ID to the code every time you want to target a new image. 

An alternative is to add the quotation as a Gallery Block and set the style too Carousel. I find this type of block works best for smaller images on mobile devices. 

If this doesn't work for you then let me know which pages have the quotation mark image and I'll write the code.

19 minutes ago, doingfun said:

Site URL: https://www.allthingsnwa.com/

Hi, 

I couldn't find a solution on how to adjust the padding between the pages in the child menu on my website. Is there some CSS code I need to inject?

I couldn't find the option built in to Squarespace. 

Hi,

You can adjust the padding by adding this code to Custom CSS.

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    padding-top:10px;
}

Hi @MarcusEldh

An easy way to fix this is to add each icon image as a Gallery Block and set the design to Carousel. I find this format resizes better on mobile devices than an image block when trying to add icons.

Hi @Jamesr_iCon

Yes there is. You can add a Search Block to whichever section you want. Within the block is the option to limit the search to a specific page, like your store.

Hope that helps.

Hi @Lucia_

Here's a previous post which walks you through how to create this.

Hi @be-one

You can target a specific page by adding the ID for that page to your CSS. 

To find the page ID, use Chrome Inspector to Inspect Page Source. Right under the opening <body> tag you'll find the ID. 

Here is the code with the page ID for your site's homepage.

//Shrink Your Logo
#collection-61e8bd44a1be2338b87396f1 #header .header-title-logo img {
  transition: max-height 800ms ease-in-out
}
#collection-61e8bd44a1be2338b87396f1 #header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 80px;
  }
}

Hi @Susi_GraphicDesigner

You can paste it as is. I've added all the correct IDs from your site 🙂

Let me know how you get on.

On 2/1/2022 at 11:04 AM, Papa_Gee said:

Site URL: https://www.hyperreel.co.uk

As above in the description / question. Can anyone help please? I don't have the correct pics yet but I'll want to crack on as soon as I have them. The help will be hugely appreciated.

Thanks

PS. If this isn't globally possible across entire site, the 'ABOUT' & 'CONTACT' pages are the ones which need the most help with a BG image.

Hi @Papa_Gee

Here's a tutorial by Beatriz Caraballo on how to add a fixed background image to your site.

https://www.beatrizcaraballo.com/blog/fixed-background

Hi @tonicastudio

In this case I think the text is all the same style, they have just capitalised some words and used italics/lowercase for others. You can create this manually in a text block.

Let me know how you get on.

9 hours ago, xmanairzz said:

Great! Thank you so much. Is there a way to make the whole box in the nav dropdown interactive rather than just the words?

Can you provide a bit more detail please? What do you mean by interactive and which "box" are you referring too. Thanks.

Hi @Capnvini

It looks like you solved it. The text is no longer vertical 🙂 

Hi @Steph1249

The reason your summary block is not centre is because there is a margin on the right of each thumbnail. Have you added custom CSS to style the summary block? This is what is causing the issue...

@media screen and (min-width: 992px){

	div#block-yui_3_17_2_1_1620192787467_18304 .summary-item {
    	width: 22.4981% !important;
    	margin-bottom: 3.33592% !important;
    	clear: none !important;
    	margin-right: 2.5019% !important; 
	}
}

If you have, then remove this CSS.

Then select Size and Spacing at the bottom of the Summary block editor and adjust the column width and gutter to position 4 thumbnails in a row. 

Hope this helps.

14 minutes ago, MoiToi said:

Hmmm - I see. Unfortunately when I add a block, there aren't any options for a "Gallery". Is it called something else? Summary? Accordian? (as I'm not familiar with either of those). I really appreciate this. Thank you.

 

Hmm, that's strange. The Gallery block option should be underneath the image block.

Not a problem. Change your Gallery Section layout to "Grid:Simple". And then add this code from this previous thread to Custom CSS.

@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(3,auto) !important;
}
}

Hopefully that's done the trick 🙂

4 minutes ago, MoiToi said:

I didn't realize that images in a gallery could link - so I've set that up. I added the code to the Custom CSS within the design panel, but it had no impact on the mobile view. Is there somewhere else I should be pasting it?

 

Looks like you've added a gallery section. This code works for a gallery block only.

Add a blank section and then add a gallery block to the section. You can add url's to gallery block images too.

Hi @JessMay

You can change the button colour by adding this to Custom CSS

.sqs-pill-shopping-cart-content.dark {
    border: none;
    color: #5c462d;
    background-color: #b8a999;
    background-image: linear-gradient(#c7b7a6,#b8a999);
}

Hi @cmv

Happy to help. What is your website password?

Hi @talia0221. You're welcome to DM me.

Hi @mlayyye_melb

Add this to your code block instead

<a href="Your ClassPass Page URL"><img alt="2021 ClassPass Awards - Best Fitness" src="https://partners-new.classpass.com/hubfs/2021%20ClassPass%20Awards%20Badges/2021%20ClassPass%20Awards%20-%20Fitness%20-%20Black.png" style="display:block; margin-left:auto; margin-right:auto; width:500px;"/></a>

Hi @talia0221

What's your website url?

hi @MoiToi

Use a gallery block (grid) instead of image blocks. Gallery blocks display images in two columns on mobile devices. If you want the Gallery block to display 3 columns on mobile then add this to Custom CSS.

@media screen and (max-width: 767px){
	.sqs-layout .sqs-gallery-design-grid-slide {
    	width: 33.3% !important;
	}
}

Hi @ScandiWater

Unfortunately there is no way to copy sections between pages. 

Here's a thread with a few suggestions from other users.