IgnitePerth

@davidmenke Alot of the other posts on this issue mention the use of bancamp embeds. 

The embed has options to display tracklists, merch thumbnails, large or small album art and would mean you only need to manage the Album at its source (Bandcamp).
 

Without knowing your exact use case, it is hard to offer solutions though.  Do you have a specific use case you'd like help recreating in 7.1?

 

have you tried the below solution from @tuanphan?

This is a more specific version of the linked post, for your use case.

It adds a margin left to account for the actual, hidden, width of the block - which makes it appear off center.  Someone else may have a better solution but I think this will get the job done:

a.blog-more-link {
    visibility: hidden;
}
a.blog-more-link:before {
    content: "See More";
    visibility: visible;
    text-decoration: underline;
    margin-left:8ch;
}

Edit the Blog Post

Section > Settings

Show Categories

3 hours ago, Assad said:

@Ziggy @tuanphan unfortunately this did not resolve the issue, I'm afraid. Would you have any other suggestions? Thanks a lot for thinking a long, appreciate it!

 

 

You can fix this by going into Mobile view in the editor and aligning the blocks.  Your blocks all start on grid column 2 (slightly to the right) in this section.  

Grab each block and center it on the page.

Your current position is

grid-area: 2/2/5/10

I think you want:

grid-area: 2/1/5/10

Once you have your blocks centered, you can just choose to center align the text.

Hiya Threecats!

Do you mean Google's Structured Data snippets?  This is the code that helps google provide rich results in google search pages.

https://developers.google.com/search/docs/appearance/structured-data/sd-policies

Hi Bryan!

This code will hide that block on the /creativedept page.  Place it in Design > Custom CSS

#collection-61df4e8c1d5fe5308320fc63 #block-0a3136bbbf1ee3dfabe8 {
  display:none;
}

Let us know how you go!

Hi Kara,

It looks like it's because of the way you have added the spacers.  I would either;

1. add spacers left & right of all columns (you do not have one left of the first column; or
2. remove the spacers, and use flex-box to spread the columns evenly (this would be the most responsive way of achieving your goal.

For option 2, remove all the spacers and try the below code:

#page-61e7db92aaec125829bddaf9 > .sqs-row ~.sqs-row{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between
}

You can play with justify-content to see which kind of spacing you prefer.
I'd go with space-around, or space-between.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Let us know how you go! ❤️

On 1/25/2022 at 7:51 PM, bishbashbosh said:

I have the same issue here: gallery (PW: deek)

All the solutions I've found have involved using Code Injection, which is only available for Business plans.

I'm working for a client who doesn't need any other function from a business plan, and I'm not going to push them to upgrade just for this.

Right now my options are:

1. go back to 7.0 (I really, really prefer working with 7.1. and 7.0's options aren't that great either)

2. add each image individually and form a kind of masonry grid with organizing & spacers in the hopes that SS will update the lightbox caption options before I need to add more images (will probably be a stupid amount of work and I'm worried about responsiveness - a lot of iPads being used in the target audience)

Is there any other option? Or, is there an idea of when Squarespace might include this function?

Hiya Bish,

You can add styles in a code block within that page, between <style> tags, rather than using the Custom CSS area.  It is not considered best practice, but it will work.

If you want any specific help I'd start a new post so people can find, and help you.

** the above also assumes there is a reason you cannot just code a normal HTML element in to these cards/pricing tables for the images.

Hi Jordon,

I'd probably go with pseudo elements.  The below example assumes the same logo/icon for each block, but you could swap out the block id's for the class used below (custom-pricing-table) in the actual pseudo element. ie: create a ::before element for every different logo/table

In the below example the outline is for reference only, so you can easy identify where the element is.  Play around with the sizing/padding to match your icons/logos.
 

.custom-pricing-table{
  position:relative;
  padding-top:100px;
}

.custom-pricing-table::before{
  content:"";
  position:absolute;
  width:20%;
  min-width:80px;
  aspect-ratio:1 / 1;
  top:0;
  left:0;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/c/c5/Squarespace_Logo.png");
  outline:red 2px solid;
  background-size:cover;
  
}
  
}

Hi Art o/

We will need to know the password you created in Settings > Site Availability in order to help

Hi Margmorg - you absolutely can choose right aligned - the option just isn't very intuitive.

When you select edit site header, on the right hand side of your screen, you get a popup menu.  The initial settings tab is for GLOBAL.  Select the monitor icon for Desktop.  The options you are looking for are in there.

 

not without some javascript (business plan). 

The generally accepted layout for menu items that need/want to have an overview is to create that overview page and just place it first in the list/folder.

So in your case https://www.stephanilewis.com/television would be the first item listed under the folder "Television".

I believe they removed the functionality for clickable folders as it caused issues for mobile users. (don't quote me on that though)

47 minutes ago, boase333 said:

I figured that is probably the case right here with this one. I brought the whole thing in the manner you confirmed and its just not working. And I suppose for what I need it for it might be too complicated for squarespace to paintings with sadly.

Try submitted a new post with a link to your site, so that we can help you.

Can you share you site password for us to take a look?

In order to apply that code only to desktop, place your code inside a media query. 

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

The above code goes inside here

}

Can you share a link to your site so we can take a look?

@tuanphan posts & gets tagged a lot - I'd give them a day or 2 to see the notification.  Other wise check any of the top posters eg @paul2009

I think this one is a question for @tuanphan

On 8/5/2021 at 10:44 PM, jenniferboddam said:

I think I just need to play around with it for awhile and stick within squarespaces means for now.

I'd love to see what you come up with - really digging your layout!

Fiddling with the options for gallery - you could make it 4 items and space the left and right to the sides in order to achieve your offscreen choices - not really  an actual slider that is going to show all your posts in a carousel though.

Something like this?

.sqs-block-summary-v2 .summary-item-list .summary-item:first-child{
  margin-left:-150px;
  margin-right:125px;
}

.sqs-block-summary-v2 .summary-item-list .summary-item:last-child {
  margin-left:100px;
}

.sqs-block-summary-v2 .summary-item-list .summary-item:nth-child(3){
  margin-left:50px;
}

The gallery block has a slideshow reel option that sounds like what you want. The Gallery block has to have images/links manually added to it however - you will not be able to automagically link it to your blog.  It would be good in this case if it's just going to show some featured posts - I don't know that I would use it if you are going to have to constantly update it for new/live posts though.  

For the Gallery you currently have:

The css that changes the way the flex items are spaced out is justify-content.  You could try changing that to space-around, or space-between.  This will use Flex's magic to do it automatically.  If this is not what you are after, you would need to rely on setting margins, with something like:

 

/* this only works if there will only be 2 items displayed */


.sqs-block-summary-v2 .summary-item-list >.summary-item ~.summary-item{ 
  margin-left: 150px
}


/* or using last child */

.sqs-block-summary-v2 .summary-item-list .summary-item:last-child {
  margin-left:150px;
}

I'm sure there is a more eloquent selector to use, but this just gives an example to see if it is what you are looking for.

Without a site link we can't really provide you with a solution. You can privately share your dev site with a password (it only allows us to view it).

The problem is likely a margin or padding from the surrounding blocks/sections.

Do you mean you want EVERY section on EVERY page to be exactly the height and width of the screen?

Can you share your site link with us?