tuanphan

Hi,

Can you share link to page in screenshot? We can check easier

I see you solved with new code?

@media screen and (max-width: 767px) {
    .gallery-masonry-item-wrapper {
        height:auto !important;
        margin-bottom: 30px !important
    }

    figure.gallery-masonry-item {
        position: relative !important;
        width: 100% !important;
        transform: unset !important
    }

    .gallery-masonry-item-wrapper {
        height: auto !important
    }

    .gallery-masonry .gallery-masonry-item[data-loaded] img {
        width: 100% !important
    }

    .gallery-masonry {
        padding-left: 10 !important;
        padding-right: 10 !important
    }

    .gallery-masonry-wrapper.gallery-masonry-list--ready {
        height: auto !important
    }
}

On 2/27/2023 at 9:03 PM, ben_blue said:

Absolutely! https://www.thespiritualpilgrim.com/blog/why-pilgrimage

Add this to Design > Custom CSS

/* Blog Posts Header */
body[class*="type-blog"].view-item {
	header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
header#header div.header-nav-item a {
    color: black !important;
}
}

Your screenshot looks fine. Can you highlight the white bar?

On 2/27/2023 at 4:05 PM, Broosha said:

??

That's odd. This is what i see (image taken 27/2/2023 10:05

 

 

Use this new code

/* tablet */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="625ae728ce43721fdfb369f2"] {
    grid-template-columns: repeat(4,1fr) !important;
}
}

On 2/27/2023 at 2:29 PM, tonybrasunas said:

The live site is http://www.balancedmediadiet.com so you can see where it's all jumbled. 

 

Do you use any Code Blocks? Maybe Code Block caused this

On 2/27/2023 at 12:54 PM, artsaid said:

Is there a way to hide subpages from a portfolio?

 

If you share link to portfolio + let me know which subpages you want to hide, we can help easier

Change this line

#page .page-section:nth-child(2) .section-background {
    background-color: transparent!important;
}

to this

section, .section-background, .section-border {
    background-color: transparent !important;
}
section:first-child {
    z-index: 999999 !important;
}
section {
	overflow: hidden;
}

Can you share link to page in screenshot? We can help easier

On 2/27/2023 at 6:39 AM, bika said:

Looking for a custom css to round the edges of the entire Squarespace site. Example of what I'd like to accomplish here: https://chateauorlando.com/

 

Is there a code for this?

What is your site url? We can help easier

Add to Design > Custom CSS

body[class*="type-products"].view-item header#header {
    background-image: url(https://images.squarespace-cdn.com/content/v1/63b5ed5e58d111590903192a/1675045798337-L6JIEQJ1X5MNT60CQZ96/unsplash-image-z7rzbFHXym0.jpg?format=original);
    background-size: cover;
    background-repeat: no-repeat;
}
body[class*="type-products"].view-item header#header .header-nav-item *, body[class*="type-products"].view-item header#header span, body[class*="type-products"].view-item header#header svg {
    color: white;
}

On 2/26/2023 at 2:37 AM, LuckyLuke said:

Sorry, this one -->https://pomegranate-cow-6lyt.squarespace.com/portfolio

Try adding to Design > Custom CSS

a.grid-item, .grid-image {
    padding-bottom: 20% !important;
}

On 2/26/2023 at 4:51 PM, Johnac said:

Hi there,

The button is on the footer and it is only on mobile. I would like it to be on the full screen when scrolling on every screen.

Don't remove any code in your current code

Add this to Design > Custom CSS

footer.sections section, footer.sections {
    z-index: 9999999 !important;
    position: relative;
}

On 2/27/2023 at 3:09 AM, sisutemplates said:

Hi @tuanphan,

I am using this code and it looks great. Just two questions, if you have the time:

1. How can I align the secondary titles (learn brand strategy, etc.) so that all the titles are justified to the left?

2. How can I replace the arrow icon with an image? 

The site I'm working on is https://rectangle-seadragon-eccx.squarespace.com/ (home page) PW: demo

I have uploaded a sample arrow icon here: https://static1.squarespace.com/static/63efe3291e78f65d59071210/t/63fb8575f842825742dc380c/1677428085817/makefg.php.png. 

Thank you!

The site is private. Can you check it again?

On 2/27/2023 at 4:07 AM, MikeAwo said:

Yes, exactly. @tuanphan

Add to Design > Custom CSS

.portfolio-hover[data-mode="hover-cover"][data-height="custom"] li:nth-child(n+10) {
    display: none;
}

On 2/27/2023 at 7:18 AM, Claire_auck said:

Hey @tuanphan

I need it for 1 & 2 for the whole portfolio.

Many thanks
Claire.

 

#1 will apply all

#2. Change to this

@media screen and (max-width:767px) {
.gallery-block .sqs-gallery-block-grid .sqs-gallery-design-grid {
    height: auto !important;
}
.gallery-block .sqs-gallery-block-grid .sqs-gallery-design-grid .slide {
    position: static !important;
    width: 100% !important;
}
.gallery-block .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    flex-direction: column-reverse;
}
}

Hi,

What is your site url? We can check easier

On 2/27/2023 at 7:08 AM, MikeAwo said:

Hi @tuanphan

Is it possible to remove the hover feature for mobile and have a simple grid with pictures and titles but retain the hover feature on web?

Or better, if the 'hover' feature can work on mobile but while scrolling like what they have at hanzo.es. Is this feasible?

Yes. Possible. What is your site url? We can help easier

Or you can try adding this to Design > Custom CSS first

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}

On 2/27/2023 at 5:57 AM, acjr_noob said:

I have the same issue, so do let me know the resolution to this! 

What is your site url?

On 2/26/2023 at 1:43 PM, AndyKhouri said:

Oops! Try this:

https://turtle-kumquat-lsg8.squarespace.com/test-page
Password: circlehelp

Add to Test Page Header

<style>
  body {
    position: relative;
}
footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
footer.sections section, footer.sections .section-background, .section-border {
    background: transparent !important;
}
</style>

On 2/26/2023 at 11:47 PM, AlexRobins said:

Hello Thanks a lot, do you know the code for change the background of the announcement bar. 

Can you enable announcement bar? I don't see it now

On 2/26/2023 at 9:48 PM, ziurkis said:

Hi, does anybody know a way to center the social icons in the header? I tried a few solutions from other posts in the forum, but nothing seems to work for my particular case.. Thanks!

What is your site url? We can use script code to achieve this

Can you share link to a page where you use button? We can find rule of code easier

Hi,

What is site url?

On 2/26/2023 at 2:44 PM, Bigla said:

Does anyone have any idea about this? Am I not able to remove it because I'm on 7.1?

Hi,

What is your site url?