HOMENCREATIVE

@tuanphan I saw you responded to a similar issue in a different thread. Any idea why this might be happening?

I cannot get the text and add/remove buttons in the shopping cart to appear! Even though I've edited the site style to be navy text, everything appears white and cannot be seen. I tried adding custom code but it kept changing the font color of the footer, too. I don't see any font color assignment sections for the shopping cart when editing styles either. Please help!

Password: teamorder

URL: https://www.blueprintcookie.com/team-member-ordering

@Ziggy hmm, I see! So do you suggest I not use this method and create the auto-scroll using individual images?

@Ziggy sorry about that, I added ot to the forum post so I thought it included it!

https://www.tasteedmonds.com/home-2024

I've successfully added CSS code to have an auto-scrolling logo carousel. I created the effect by creating two files that are 3000px wide X 300px H using a Canva template with the logos spaced evenly instead of uploading individual logos to avoid spacing issues.

For some reason, the auto-scroll is showing off of the webpage when I scroll my mouse to the right. I cannot figure out how to fix this! Help! I created the effect by using the following code to custom CSS.

/* Infinite Logo Scroll */
#SECTIONID .gallery-reel-list {
  animation: scroll 20s linear infinite;
  display: flex;
  width: 3000px;
  overflow: visible;
}

@keyframes scroll {
	0% { 
      transform: translateX(0); 
  }
	100% { 
     transform: translateX(-1500px);
  }
}

@tuanphan I got the resizing of the image to work, but I'm struggling to figure out how to increase the wrapper size so that it doesn't cut off part of the image on the top/bottom (see far right 'Souvenir Shop')

See image below.

www.cafe-club.squarespace.com

password: cafeclub

@paul2009  

URL: www.cafe-club.squarespace.com

password: cafeclub

@paul2009 I used your code successfully, however I had to increase the height of the button and add padding to the text to center it because it was showing up very narrow! Just FYI. 

Secondly, for some reason, it's showing a fill behind the text of the button even though I've updated both the "color" and "background-color" correctly.

Any idea why this is happening? The code I have is:

/*MOBILE STICKY FOOTER CTA */
/* Mobile CTA bar - Squarespace 7.1   */
/* Left (secondary) button colours */
.sf-mobile-cta-btn:nth-of-type(1) {
  background-color: #000000;
  color: #fffff;
  font-family: "Futura-PT";
  font-size: 1.2rem !important; //size
  font-weight: 600 !important; //
  padding-top: 13px!important;
}

/* Right (primary) button colours */
.sf-mobile-cta-btn:nth-of-type(2) {
  background-color: #006837;
  color: #ffffff;
  font-family: "Futura-PT";
  font-size: 1.2rem !important; //size
  font-weight: 600 !important; //
  padding-top: 13px!important;
 
}

@media only screen and (max-width:800px) and (orientation: portrait) {
  .sf-mobile-cta-wrapper {
    display: block!important;
  }
}

.sf-mobile-cta-wrapper {
  background: #ebebeb;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: bottom .3s;
}
.sf-mobile-cta {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  height: 50px;
}
.sf-mobile-cta-btn {
  flex-grow:1;
  flex-basis: 0;
  text-align: center;
}
/* End of navigation hover effect    */

@tuanphan works perfect, thanks kindly!

@tuanphan thank you so much, it works!!

@tuanphan I have a similar issue and can't seem to figure out to fix it! I have a gradient header, and made the opacity 100% for the 1st section background. But I want to get ride of the weird line showing between header and section #1. Any idea?

Website : www.cafe-club.squarespace.com

password: cafeclub

@tuanphan thank you it worked! How do I adjust the size of the image?

Website: www.cafe-club.squarespace.com

password: cafeclub

@tuanphan I'm trying to replace my main navigation links with a custom hand-drawn image instead of a font. I tried using the custom CSS provided above but nothing is happening. I uploaded the .png files to custom CSS and used this code:

.nav-item [href="/menu"] span {
    visibility: hidden;
}
.nav-item [href="/menu"] span:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/658da47d0f5cf817eeeb2f99/t/65b02581c6873a3f75bab162/1706042753513/CUISINE.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    visibility: visible;
}

Hi!

I'm looking for how to wrap a hyphenated word to the next line automatically without resizing the block. I'm specifically noticing this on mobile. See photo.

I've had this happen on a few different sites I've designed, and I've only been able to fix it when I use a custom code block and add a line break. However, I'd like to apply this to a text block instead.

Does anyone know how to do this or what custom CSS to add?

@Ziggy Hi there - thanks for helping!

I do have custom CSS applied to the website, as well as for this portfolio page.

It happens when you click to view each project and scroll to the bottom to click the "next" project. Here is the website and link for what I mean > https://www.lemonpopcreative.com/our-work/aventura-mall

It only happens on mobile.

For some reason when viewing portfolio subpages, the pagination at bottom indicating the "next" project requires TWO taps for it work on mobile. I've tried to figure this out, but I don't understand why it is doing this on mobile only.

It happens on every single portfolio sub-page when navigating to the next project. Any idea how to fix this?

site: https://www.lemonpopcreative.com/our-work/hutton-brickyards

pswd: lemon

I'm trying to remove extra padding that keeps displaying below my uploaded videos, specifically for Mobile view only. It shows a very small amount in edit mode, but when I look at the live mobile version on my phone additional white space is added. I added code to make the video display 16:9 ratio. Anyone know the code to keep this from happening? See below.

Edit Mode                                                                                        Live mode on my Iphone

.       

I'm having this same issue! Trying to find a solution but can't anywhere. My only next resort is to purchase an Instagram Feed plugin from a third party....but I would ideally like to avoid this.

I also noticed that some video reel embeds display "watch video on Instagram" while some play directly on the website page. 

Anyone know why this is happening?

@tuanphan although I did notice 1 odd thing.

When I preview the website on Mobile, the background opacity behind the text changes as you scroll. It starts as a less opaque background, then the opacity increases after about 2-3 seconds.

Do you mind taking a look? 

The link is https://lemon-pop.squarespace.com/our-work

pswd: lemon

@tuanphan it worked perfectly! Thank you so much 🙂

 @tuanphan Ahh...I see. Dang. The client won't be adding 2 items until the future when they have another event to add. I'll have to come up with a different solution so that they can easily edit the events on their own without needing to reach out to me for help.

Hi There!

I am trying to customize the mobile view ONLY using CSS for the portfolio grid. I would like to remove the "after hover" effect for each sub-page, and I would like it to display the Title in black with a small rectangle transparent white overlay at the bottom of each sub-page. This is because the hover effect doesn't make sense on mobile nor does it show the project title... Here is an example of what I'm trying to achieve:

This is the code I've used to get the Title to move to the bottom, but I can't figure out how to remove the hover box and have it show permanently as the above:

/* MOBILE GRID VIEW */
@media screen and (max-width:767px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1!important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none!important;
      transform: translateY(0);
    color: black!important;
  }
/* title position */
  .portfolio-text {
    padding-top: 80%!important;
  }
}

The website URL is:

@tuanphan Hi! 

The new page URL is https://www.youngengineers.com/events !

@KwameAndCo yay its almost 100% there. It works for centering the 1st item, and then it shifts over when adding a 2nd or 3rd item.

Is it possible to make it so that when there are 2 items, they are centered in the middle? Instead of left justified like the below?

@KwameAndCo  It worked to center the user list item, but when I go to add a 2nd and 3rd event, it doesn't shift over. It stays center. Therefore looks like this. This seems fairly simply to do but I can't figure it out!