Jump to content

LULU3

Member
 View Profile  See their activity

  • Posts

    50

  • Joined

  • Last visited

 Content Type 

Posts posted by LULU3

    Website header/slideshow/button

    in Customize with code

    Posted

    On 10/8/2024 at 8:54 PM, LULU3 said:

    Hi @Spark-Plugin - This code doesn't work and I'm unsure if I was clear on my request. I would like the black header thinner in height? (blue arrow on image attached)

    Regarding the slideshow and 'drag down', I would like the slideshow images to have more height. (red arrow on image attached).

    Capture3.PNG

    @tuanphan are you able to assist with this please? I need to drag the slideshow images block down on mobile so it is longer. It is currently on the carousel setting.

    Instagram Block photo hover

    in Customize with code

    Posted

    On 10/8/2024 at 11:11 AM, tuanphan said:

    Use this code 

    /* hover */
#block-66b1395efac2a52f0691f786 {
.slide a:before {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
	/* caption hover */
.slide a:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    text-align: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_10/black-instagram-logo-3497.png.d1b5efb2e43de160668d518b9152798a.png);
    background-size: contain;
    width: 30px;
    height: 30px;
}
.slide:hover a:before, .slide:hover a:after {
    opacity: 1;
}}

     

    Thank you, this looks great on desktop but on mobile the icons are too big. How do I reduce them in size on mobile please?

    Website header/slideshow/button

    in Customize with code

    Posted

    On 10/9/2024 at 9:11 AM, Spark-Plugin said:

    Hi @LULU3, Now it is clear. For the header you can paste the code below, and play around with the px values. As for the slideshow, I am still working on it, will let you know if I find the solution. Thanks:) 

    @media screen and (max-width:768px) {
.header .header-announcement-bar-wrapper {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}
}

     

    Thank you, the code worked. If you could let me know if there is an update regarding the slideshow that would be great? 🙂

    Website header/slideshow/button

    in Customize with code

    Posted · Edited by LULU3

    9 hours ago, Spark-Plugin said:

    Hi again @LULU3, this code goes into the CSS box.

     

    1. Navigate to Pages > Website Tools > Custom CSS.
    2. Paste the code into the CSS editor.
    3. Hit Save and you’re done

    As for the slideshow, could you please clarify what you mean by "drag down"? I want to make sure I understand your request fully so I can assist you better.

    Hi @Spark-Plugin - This code doesn't work and I'm unsure if I was clear on my request. I would like the black header thinner in height? (blue arrow on image attached)

    Regarding the slideshow and 'drag down', I would like the slideshow images to have more height. (red arrow on image attached).

    Capture3.PNG

    Changing font size for trustpilot widget?

    in Customize with code

    Posted · Edited by LULU3

    On 5/27/2022 at 1:33 PM, DV2 said:

    I should have thought to check for that. Let's try wrapping the CSS in a media query so it only scales up when the screen is large enough. 

    @media only screen and (min-width: 768px){
  .trustpilot-widget iframe {
    transform: scale(1.5);
  }
}

    There seems to be something else stretching the page just a little too wide (horizontal scroll bar appears) until you get to 1450px of screen width. I'm not sure what is causing it.

    @DV2 This code also worked for me. Are you able to advise how to reduce the white space around the Trustpilot widget please?

     

    Screenshot 2024-08-13 at 21.07.29.png

    Screenshot 2024-08-13 at 21.36.05.png

    Changing the color of individual social media icons AND Why does the behavior of the social media block not work like other sites?

    in Fonts, colors and images

    Posted

    On 1/5/2023 at 5:11 PM, paul2009 said:

    Hi Colt

    The example site was built on Squarespace 7.0. Social Link Blocks on Squarespace 7.0 have an option to set the colour to "Standard" where each icon matches the service's branding. For example, the Facebook icon will be blue and YouTube will be red. It also has the hover features that you describe.

    However, on Squarespace 7.1 the Social Link Block has different options. You can assign any colour, but it will be used for all icons. It is not possible to use their default branding colours using the built-in options, but you can add some custom CSS to mimic Squarespace 7.0 icons on your Squarespace 7.1. I put together a quick guide here: Add brand colours to social link icons on Squarespace 7.1.

    Did this help? Please give feedback by clicking an icon below  ⬇️

    @paul2009 are you able to share the code for the Tik Tok logo please?

×
×
  • 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