happyscone

ahh I see what you did there, it's hiding behind the image.

I tried a few things and ultimately had to rebuild the tabs on a new page and got it to work. Thanks so much for your prompt response to help!

I have a site I built a while ago that was working fine, but recently one of the pages just broke. I had coded tabs so a user could select between cutting/color/treatment/packages.

On mobile: the tabs are appearing above the image (supposed to be below) and are no longer functioning.

On desktop: tabs aren't even showing up

I haven't been coding for a bit, so would appreciate some help fixing this!

URL https://www.revampsalonsf.com/services

33 minutes ago, tuanphan said:

try this CSS

[data-section-id="id here id here"] {
&, .content-wrapper, .section-background {
  background-color: transparent !important;
}
.section-background {
background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
  background-size: 600% 100%;
  animation: gradient 16s linear infinite;
  animation-direction: alternate;
}
}
@keyframes  gradient {
  0% {background-position: 0%;}
  100% {background-position: 100%;}
}

 

Thanks @tuanphan this worked! 

On 12/4/2021 at 3:38 AM, bangank36 said:

Is it the result you want to achieve?

 

 Try adding to Home > Design > Custom Css

section, section .content-wrapper, section .section-background {
  background: transparent !important;
}
#siteWrapper {
  background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
  background-size: 600% 100%;
  animation: gradient 16s linear infinite;
  animation-direction: alternate;
}


@keyframes  gradient {
  0% {background-position: 0%;}
  100% {background-position: 100%;}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

hey @bangank36 how can I do this to target just one section of a page? I am trying to wrap the CSS you provided within a data section ID, and then it stops working.

Thanks in advance!

@tuanphan I'm going to live with it - think it is fine the way it is, thanks!

@bangank36 that worked perfectly! Thank you! 

Site URL: https://www.harmony-bodyworkenergy.com/

This is a website I created a year ago with 7.0 with a lot of custom editing. Recently I was looking at the live site and there appears to be extra space below images - to be clear, this was not the case when I launched the site.

This issue appears to be happening with most of the images on all pages. I am not quite sure what is causing this and I am hopeful someone can help out! I have been in 7.1 land lately, so its been a while since I peeked at the backend of a 7.0 site.

@tuanphan you can see this here: https://www.revampsalonsf.com/services 

@tuanphan thank you so much! that worked this time 🙂

@bangank36 amazing! thank you so much, this worked great!

@bangank36 that did indeed fix it! Thank you so much!!!

@bangank36 I would like the header to go full width and not break to two lines, especially since there is plenty of space on the nav. When I inspect it though, it looks like its being forced into a limited space and I am not sure what that purple box is highlighting. In the Squarespace settings, the nav is set to be Full Width

Site URL: https://www.revampsalonsf.com/

Even at it's largest breakpoint, the navigation is not going full width and the social icons break to a new line. I would like the menu to go full width when possible.

Website is live: revampsalonsf.com

@tuanphan this worked, but the icons are not center on the screen. I tried a few different properties, but no success.

@tuanphan this worked, thank you!

Site URL: https://cone-tuna-x47f.squarespace.com/

I created some tabs on the Services page with this code tutorial: https://www.will-myers.com/articles/adding-simple-tabs-to-your-website-in-squarespace-71-and-70

Unfortunately, it did not render well for Mobile and the tabs were cutting off. I managed to alter the code so that the tabs did not cut off, but now there is a big chunk of padding above that is technically the code block itself... wanted to see if anyone had any thoughts on how to adjust this?

https://cone-tuna-x47f.squarespace.com/ pw: haircare

@tuanphan this worked great on desktop, but on mobile the icons are stacking. Is there a way to make them all on the same line?

@tuanphan hmm that didn't appear to work. I am using a plugin for the lightbox though, so that might be why (https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin)

@tuanphan Thank you!

@tuanphan I am referring to the clock icon next to the days of the week, found on this page - https://cone-tuna-x47f.squarespace.com/the-collective pw:haircare

@tuanphan thank you so much!

@tuanphan yes thats sounds right! desktop only makes sense

@tuanphan I added the Instagram + FB links as you described above.

Site URL: https://cone-tuna-x47f.squarespace.com/

I am trying to target the last image in this gallery to hide on mobile only to avoid the empty white space.

Thanks in advance for the help!

https://cone-tuna-x47f.squarespace.com/

pw: haircare

Site URL: https://cone-tuna-x47f.squarespace.com/

I want to visually align the SVG icon and the days horizontally. I am using a code block.

I tried using a code block + text block together and the spacing between is too large. Open to other suggestions/solutions!

https://cone-tuna-x47f.squarespace.com/

pw: haircare