-
Posts
100 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by meganheath
-
Hi @Bluemonque Try this instead #siteWrapper .header-actions-action--cta .sqs-button-element--primary { font-family: 'Roboto Condensed'; font-weight: 700; }
- 2 replies
-
- font
- code-injection
-
(and 1 more)
Tagged with:
-
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.
- 1 reply
-
- gallery-page
- search
-
(and 1 more)
Tagged with:
-
Need custom code to downsize images for mobile view
meganheath replied to Susi_GraphicDesigner's topic in Customize with code
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. -
Need custom code to downsize images for mobile view
meganheath replied to Susi_GraphicDesigner's topic in Customize with code
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; } } -
Need custom code to downsize images for mobile view
meganheath replied to Susi_GraphicDesigner's topic in Customize with code
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.
-
Help Add a search bar to my e-commerce Website?
meganheath replied to Jamesr_iCon's topic in Customize with code
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; } }
-
Need custom code to downsize images for mobile view
meganheath replied to Susi_GraphicDesigner's topic in Customize with code
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. -
different font and font styles within the one text block?
meganheath replied to tonicastudio's topic in Customize with code
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. -
Add a shadow and boxed rows to navigation bar
meganheath replied to xmanairzz's topic in Customize with code
Can you provide a bit more detail please? What do you mean by interactive and which "box" are you referring too. Thanks. -
Changing vertical text back to horizontal
meganheath replied to Capnvini's topic in Customize with code
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.
-
Hey there - similar question here. I've created a directory for a client with a row of image blocks that each link to a pre-filtered list for each category. In mobile view the auto stacking single wide isn't great. 2 rows of 3 would be great. code ideas?
meganheath replied to MoiToi's topic in Customize with code
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 🙂 -
Hey there - similar question here. I've created a directory for a client with a row of image blocks that each link to a pre-filtered list for each category. In mobile view the auto stacking single wide isn't great. 2 rows of 3 would be great. code ideas?
meganheath replied to MoiToi's topic in Customize with code
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. -
How to change the color of the 'item in cart' pill button
meganheath replied to JessMay's topic in Customize with code
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); }- 3 replies
-
- custom-css
- add-to-cart
-
(and 2 more)
Tagged with:
-
Hi @cmv Happy to help. What is your website password?
-
Hi @talia0221. You're welcome to DM me.
-
Horizontally centering a 'badge'/link on my home page
meganheath replied to mlayyye_melb's topic in Customize with code
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?
-
Hey there - similar question here. I've created a directory for a client with a row of image blocks that each link to a pre-filtered list for each category. In mobile view the auto stacking single wide isn't great. 2 rows of 3 would be great. code ideas?
meganheath replied to MoiToi's topic in Customize with code
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; } } -
Copy the front page header to all pages
meganheath replied to ScandiWater's topic in Customize with code
Hi @ScandiWater Unfortunately there is no way to copy sections between pages. Here's a thread with a few suggestions from other users.