Jump to content

tuanphan

Circle Member
 View Profile  See their activity

  • Posts

    66,378

  • Joined

  • Last visited

  • Days Won

    532

 Content Type 

Posts posted by tuanphan

    Product Page Background

    in Customize with code

    Posted

    On 1/11/2022 at 5:19 PM, KaelaT said:

    Hi @tuanphan! I used this code to change the background of my product pages and it worked great! However I have found it adds the same background image to my blog posts. Is it possible to only target the product pages and not the blog posts?

    Thank you!

    use this new code 

    <style>
  body.collection-type-products.view-item #page section:first-child .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

     

    Can I resize first page image on mobile? Responsive design.

    in Customize with code

    Posted

    On 1/11/2022 at 12:49 PM, JenEV said:

    Wow, thank you. I've never touched that part of the design site before, I was a bit scared by the notice; Warning: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS.

    What do you think of the look of the first page now on mobile? It looks like nothing I've ever seen before. How to I play with it a bit? I don't know what I think of it as I really had in mind just having the woman's face on the first page? But it just looked too big.....

    Thanks for your help. Jen

    p.s. can you really mess up your site inside the CSS? Or can you just delete what you've added and it goes back to normal?

    I don't think there's a way to backup with Squarespace is there? So if you break something you're in trouble?

     

    F334A4B5-5D1B-4078-B198-1CFEC43D64F6.png

    49782FEE-8EDA-4DB1-B59B-6136D189CFAF.png

    Yes. "you just delete what you've added and it goes back to normal"

    (Save all code in Design > Custom CSS somewhere before doing anything)

    Adjusting Mobile Menu and Submenu Alignment and Spacing on 7.1

    in Customize with code

    Posted

    On 1/11/2022 at 9:17 AM, MariaFY said:

    Hi there @tuanphan,

    I've got a similar questions for my mobile menu. 

    All nav items are set to a padding of 5 vw, but I want the distance to the header button ("Book Online") to be the same on all mobile devices so it looks like all of the other menu items. When I check the developer tool, the menu / space between nav items and nav button are different.

    How can I fix this?  Any help is appreciated. 

    URL: http://www.mauicustomcharters.com

     

    Screen Shot 2022-01-10 at 4.16.48 PM.png

    Adjust with this CSS 

    .header-menu-cta {
    position: relative;
    top: -5px;
}

     

    Adding address, phone, and button in header.

    in Customize with code

    Posted

    On 1/11/2022 at 7:14 AM, Poppyseeds said:

    Oh. My.

    So sorry. No idea what's happening.

    SITE:   https://ferret-bird-3rl2.squarespace.com
    ACCESS:  blahblahblah

    And trying to get the address stacked to two lines instead of one long line.

    Thank you, yet again.

    Edit address code to this 

    .header-nav:after {
    content: "6316 N Topanga Blvd, #405,\A Woodland Hills, CA";
    white-space: pre-wrap;
    font-family: 'Aktiv-Grotesk';
    position: relative;
    color: #302a27;
    right: 33.9vw;
    top: -3.8vh;
    font-size: .9em;
    font-weight: light;
    letter-spacing: -.04em;
    line-height: -.5em
}

    (I used white-space: pre-wrap; & \A to split address to 2 lines)

     

    Mobile view video severe crop in

    in Customize with code

    Posted

    On 1/11/2022 at 4:44 AM, VisuaGroup said:

    Yes, but the problem is the video will not resize to different display show for example; when you view from mobile the video will be cut 3/4 of the view size. Or when you

     

    Also, I want to ask if is possible. I want the banner with the section height at medium without cropping the lower and upper video. Is there a way to resize the view of the video full with that specific section height?

    To resize video on mobile, add to Design > Custom CSS 

    /* resize video mobile */
@media screen and (max-width:767px) {
[data-section-id="61d63c0cb059294ab1718460"] video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
[data-section-id="61d63c0cb059294ab1718460"] {
    min-height: unset !important;
    height: 30vh;
}
}

     

    Adding a Drop Shadow to a Picture in an Image Card Block

    in Customize with code

    Posted

    On 1/11/2022 at 3:39 AM, JuniperDewdrop said:

    Hey @tuanphan,

    That drop shadow looks really beautiful thanks! 

    Unfortunately, I also have some code that makes the button underneath the picture to expand on hover. If you check that out, the animation interferes with the picture drop shadow. Do you have a coding solution for that?

    Or would it be better to add a spacer underneath the picture?? Thanks so much! 

    Add to Design > Custom CSS 

    /* image shadown conflict button */
.image-block {
    position: relative;
    z-index: 9999999999999999999;
}

     

    Applying Hover Effect on Footer

    in Customize with code

    Posted

    On 1/11/2022 at 1:06 AM, bybridges said:

     

    Hi, I've tried a bunch of permutations for changing hover state color on my site but nothing seems to work. The only code that I've gotten to work to do anything is the following:
     

    //add footer hover state 

    footer a:hover {

    background: #BA5E41 !important;

    }

    Anything I've tried to change just the font color has failed. I'd even love to try something like what I have in the header which is a squishy line:

    :after {

      content: '';

      background: #BA5E41; //color

      height: 1px; //thickness

      width: 0;

      display: block;

      margin-top: 1px !important;

      transition: width 1s; //animation speed

      margin: 0 auto;

    }

    That didn't work either. I'm striking out.

     

    url: https://lychee-dogfish-zgem.squarespace.com/ (we will go live tonight so this may be a different url --> elcamino.travel)

    pw: ezc

    You mean

    Hover footer links >> change to another color?

    Use this CSS 

    footer.sections .html-block a:hover span {
    color: #ba5e41 !important;
}

     

    Adding Google Translate widget to the top of a website

    in Customize with code

    Posted

    On 1/11/2022 at 1:03 AM, Calley said:

    Hi folks (esp guru @tuanphan),
    when I copy and paste the exact code as shown above (per other posts)

    Squarespace tells me I am missing an opening "{"
    If I try to fix and add one in, randomly, it then says there's a syntax error on line 1.

    I am trying to add google translate to the top of header- any tips or ideas? complete novice at coding here- is there a step 1 that I am missing? thank you!

    Hi,

    It looks like you are adding to Design > Custom CSS

    You need to Add to Settings > Advanced > Code Injection > Footer

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources