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.

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.

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.

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.

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 🙂

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.