MoeTalks

This is not good news.  And the reason why this is not is blog post are stuck on 7.0.  It does not have the flair not capability to do what fluid engine does.  I cannot add full bleeds images, I can't change grid spacing and in the end, you end up looking like every other blog and yes, there are css customization but my god, I can't keep up with all the css that I have to add just to say remove the extra paragraph space, or I have to visit the inspector for every minor thing and then only to have SS update and have to start all over again.  I still believe I made a very very poor decision when coming to SS but it's one I have to live with now.  I still appreciate the help that people have given me but I need to do better in life.  I just needed to vent.  

Doesn't work for me because i'm on a regular paid plan and not a business plan.  Thanks anyway.

Also, I need to add that this ⮕ article .sqs-block-image-figure.intrinsic:nth-child(1)

is affecting all the images on my blog post, not just the first one.  I don't undersdtand the parent/child relationship with the other images.  

I wanted to try using blog post because regular pages don't have categories.  The blog will still work for what I want BUT I cannot achieve a full bleed of the first image.  I've tinkered all day with the code that Becca provided from insidethesquare but I can't make it work.  Apparently, blog posts work in 7.0 and don't have the features that 7.1 has.  This just feels hopeless. 

PW: 2024

This is what I created with just a regular page and I like.
https://www.moetalks.com/film-tv/the-wedding-year

This is the test blog version.  
https://www.moetalks.com/film-tv/the-wedding-year

I've targeted the section because the sql-block-image affected the entire site.  I added the figure.intrinsic just to see if I could target the image and it did. Unfortunately, image bleeds to the right but not to the left.  

I added a transform:translatex(-12vw) which works until you expand the screen.  This is one that I cannot figure out. 

Any help would be appreciated.

[data-section-id="66204140a638fb72fb95e09a"]{
article .sqs-block-image-figure.intrinsic:nth-child(1){
padding:0!important;
position: static;
width: 100vw;
transform:translatex(-12vw)
}  
article {overflow-x: hidden}
}

Someone please tell me why o why?  Why is it that every time I feel like i've exhausted all remedies and hope on finding an answer and I reach out to this forum, all of a sudden I find it.  It's taken me 2.5 hours to find this answer AND on top of that, it was from on old circle member in this forum (https://forum.squarespace.com/profile/9595-rwp/)

Not sure is he is still on but thank you for this code.  Now I have to figure out then what exactly does the margin-width do but that's another day.  This can be closed.

#header {
    max-width: 1920px;
    margin: auto;
}
section.page-section {
    max-width: 1920px;
    margin: auto;
}
 

I would like all my content to maintain is 1100 max width margin on desktop.  I would like it to do what this site does:  https://www.slashfilm.com/

No matter how far you stretch this site  in chrome, firefox, etc. the text and all images maintain it's margin.  Currently only my sections and all within the sections seems to maintain the site margin width but header and probably the footer (when I create one) stretches "responsively" and I don't know how to stop that.  Any suggestions?  Thanks.

And once again after spending all day working my regular job and tryig to figure out this code, the minute I send a message to the forum I figure it out.  I needed to target the #page and NOT the sqs-block-html.  It works now perfect.  Site is still open but thanks anyway.

www.moetalks.com

password 2024

Start in css at line 62.

I am trying to change the style of the hover links on the site navigation only.  This first part works great.  Just the way I want it on the navigation part on all pages.

// dropdown background & font colors //
.header-nav-folder-item {
background: #0b5394;
/*  opacity: 100%!important; if you want to make it a little less blue*/
a { color: white!important; }
}
// dropdown hover colors //
.header-nav-folder-item:hover {
background: #fac827;
}
/* Nav item hover color */
.header-nav-item a:hover {
    font-weight: bold!important;
  text-decoration:underline!important;
  a { color: white!important; }
}
But as soon as I add the below, it overrides the navigation and uses the below for the entire site, including the navigation.

I tried the #page selector and it works but because I also have markdown blocks that have links in them I would have to create a different code for each markdown block. It works perfectly without the #page selector but it's taking over the navigation.  How do I just target hover navigation links?

// #page .sqs-block-html //

a {color: #0b5394!important;
text-decoration: none!important; 
}

// #page .sqs-block-html //

a:hover  {
     color: #0b5394!important;
  text-decoration: underline!important; 
font-weight:bold
  }
 

Here is what I did Tuanphan and something I am noticing with Squarespace.  Sections can get corrupt.  I ended up deleting the section completely, then creating a new section, adding the video back to the new section and I have no problems whatsoever now.  

I tried this code as well and it didn't work.  

I'm having this same issue.  Did you ever get this resolved?

Ahhh, okay JS.  I'm not on the business plan just the personal plan @tuanphan.  Thanks for letting me know.  Once I get close to what I think may be a final product I will decide if its worth it or not.  This is really more of a personal blog project.  Thanks again.

If you look at the photo, this is just a youtube video that has one category showing.  However, I have several categories that I would want people to choose from but it looks like it stays stuck on this page and the meta category this video is assigned to is the only place they can go back to.  Since this is a video gallery page there is not a collection to target, only items page and I cannot target say 30+ plus individual gallery item post.  So, is there a way to re-create my categories at top OR I would even be okay with just a "ALL" next to the meta data that goes back to the main gallery page.  I tried to create an "All" category but it does not show up as the first word on the meta data link.  If I have two other categories the "All" category can show up last.   This is still in it's rough draft so is there another video gallery page that I should choose that will give me this option.  These are going to be nothing more than video links.  And sorry for the long explanation.   Thanks.

@tuanphan.  How do I make it so that the background border shows at say 20px but the site links still remain at 100% visibility.

I have been wrestling with this for HOURS.  In a text block I have a quote.  After the quote I have regular text.  Then I have an image block after the text block.  When I resize the website by pulling out the chrome handles the image block moves completely away from the text, by 2-3 lines.  I check other sites and could not find any reason for this.  I thought it had something to do with the page width max so I reset my page max width to 1100 and it still did not work.  The actual text on the page acknowledged the change but not image nor the header/footer either, which was strange, but that's for another day.

I remembered earlier I had an issue with the quote block so I removed the quote block from inside the text block and low and behold, when I removed the quote block, the image stayed right under the text no matter how much I resized the the website.  

I don't understand why having the quote block inside the text block would do that when clearly it's on the toolbar to be done.   My work around is I have broken up the text blocks and added the "quote" block from the "add block" menu as it's own block.  I'm just curious if anyone knows of a reason why it would do that.. I can reproduce it at the drop of a dime.  Thanks no rush. 

Thank you so much.  Enjoy the coffee.

@tuanphan

I finally got this @tuanphan.  The website is still open if you want to see.  

This code only worked when I was editing it.  Once I refreshed it even in the editor it did not work but as soon as I opened up CSS in design mode it worked.

[data-section-id="65dd51a68e3d9b0a3e68567a"] 
{
.lessons.collection-content-wrapper .nested-category-children {
    padding-bottom: 20px;
    padding-top: 0px;
    padding-left: 0;

}

I went back to Chrome inspector and just copied out the whole code and pasted into CSS and just changed what I wanted and now it translates to other browsers.   Eventually I will come to understand why all the rest of it needed to be added in order for it to work.  @tuanphan You keep trying to help so please let me buy you a cup of coffee.  What is your link?

[data-section-id="65dd51a68e3d9b0a3e68567a"] 
{
.lessons.collection-content-wrapper .nested-category-children {
    padding-bottom: 20px;
    padding-top: 0px;
    padding-left: 0;
    margin-top: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    position: relative;
}
}
 

The photo on the right in the photo is the spacing I wanted and now it sticks.

Hi Tuanphan.  I gave up on this because even after purchasing Becca's cheat sheet, I still could not get it to work.  

Sorry.  I changed it.  I figured you were extremely busy and din't want anyone else going in.  It's back to the same 2024 PW.

Hi @tuanphan

moetalks.com or moecritiques (which is what I originally used to sign up). PW 2024. 

I've since cleaned up my css.  I'm getting closer.  Thanks for whatever help you can provide.

I'm getting closer but I still cannot see what to target to get rid of all that space

I have my own domain so it may be under moetalks.com or moecritiques (which is what I originally used to sign up). PW 2024.  When I am editing i see the url in the first post i sent.

How can I  remove the extra space between the video and the text below it.  I've looked in chrome's inspector and saw the below but cannot figure out (a) how to target them correct and (b) if these are even the right ones.

video-gallery-main-content
lessons-list
lessons collection-content-wrapper lessons-list

I've tried putting dots before them and pudding padding in i.e., .video-gallery-main-content {padding: 0px;} or margin or line-height but i'm missing something.  

Can someone tell me what I am missing?  

I have my own domain so it may be under moetalks.com or moecritiques (which is what I originally used to sign up). PW 2024.  When I am editing i see the url in the photo.

What was the solution?

22 minutes ago, rooseM3 said:

Hey all I got this figured out  today after working with squarespace support. 

If you are getting those errors then you need to breakup your big section into smaller sections. 

If you have smaller sections then those formatting / overlay / giant empty spaces don't pop up and everything works as it should. Squarespace needs little bites and not big big bites. 

Hope that helps someone out there. 

I'm glad it worked for you.  I have them in smaller sections and it still just make the sections grow.  But thank you.  Maybe it will work for someone else.

@paramjeet.kour08

This was hours of research and a beast but I finally found the answer.  I think I should just quit - YIKES.

This was the code I had been searching for.  I had to take bits and pieces and tweak it, but I finally got it.  Thank you anyway.

<style>
  hr {
  overflow:initial;

  &:after {
    content:'';
    width:15%;
    height:10px;
    display:block;
    background:#8EB6DC;
    top:-5px;
    margin:auto;
    position:relative;
  }
}
}
  </style>