tuanphan

@TakExplores You want (on all devices)

header layout will be: Left (logo) - Right (Burger-5 social icons).

Is this right?

On 9/27/2021 at 1:32 PM, victoriag said:

Can you post all code in Custom CSS?

On 9/27/2021 at 12:27 PM, granthenrymedia said:

Hi @tuanphan

Thanks for the response and sorry about the broken link.  Please try this one below:

https://www.houseofflow.co/shop/cityflows-taqcampbell

I appreciate the help.

Add to Design > Custom CSS

div#productDetails {
    width: 100% !important;
}

On 9/27/2021 at 12:19 PM, L1NST3R said:

Thanks for the response! For 2, the code works, but the menu (outside of the folder) is now too far up, not centered. Is there a way to only change the alignment of the folder content menu, and not the whole menu?

For 3, the code only changed the position of the arrow, and the link text is still not aligned. 

#3. Can you explain in more detail? I thought you want to move arrow up?

Add to Design > Custom CSS > Save & reload the site

/* Resize Parallax Image - Text Mobile */
@media screen and (max-width:640px) {
body.homepage .Parallax-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body.homepage .Parallax-item figure {
    transform: unset !important;
}
/* in person */
section#intro {
    min-height: unset !important;
    height: 180px;
}
section#intro h1 {
    font-size: 20px;
}
/* new to fencing */
section#new {
    min-height: unset !important;
    height: 200px !important;
}
section#new h1 {
    font-size: 24px;
}
/* last section */
section#join {
    min-height: unset !important;
    height: 180px;
}
}

On 9/27/2021 at 11:37 AM, BradyAvenue said:

This is AWESOME, thank you @tuanphan - how do I increase the font size of the captions/font of the captions? They are SO small by default.

change this code

.image-caption p {
    margin: 0 !important;
}

to this

.image-caption p {
    margin: 0 !important;
	font-size: 50px !important;
	font-family: monospace;
}

On 9/27/2021 at 7:49 AM, jesswp said:

Hey @tuanphan! Do you mind letting me know how to achieve the mobile block swap function below? I am looking to have image shows first, then the description + button.

https://platinum-goldfish-ewl6.squarespace.com/treatments
pass: skin

In some other threads, I notice you use a single block ID to identify. How would this work in my case as there are multiple block ID (Title text block, line block, description text block and button block)

Thanks so much!

Add to Design > Custom CSS

/* Treatments image text order mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632702196855_20283+.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(5) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(7) {
    display: flex;
    flex-direction: column-reverse;
}
}

Each section needs a different combination. It is very difficult to Explain. If you have a problem, just post it on the forum, we're always here to help.

On 9/27/2021 at 9:03 AM, ekkis said:

awesome.  worked for me.  not this link but this one: https://www.rebeccagracedesigns.com/blog/replace-social-icons-in-header

Squarespace should support Telegram.  it's enormously popular

Did you solve or still need help?

On 9/27/2021 at 5:44 AM, TheDetourEffect said:

As you wish, I have now checked the "Show Title and Description" box. 

If it's the block ID you're after, it's #block-yui_3_17_2_1_1534801545666_87139

Add to Design > Custom CSS

.meta-title {
    display: none !important;
}

Hi,

You mean align center text/images? For example this section on Mint page

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#page-section-60da76c86b00c0340f42b126>.row {
    display: flex;
    align-items: center;
}
}

(ps I saw your email, you can reply here or email)

On 9/27/2021 at 4:36 AM, LULU3 said:

Hi @tuanphan. Please can you kindly advise how I can add demo captions? Thanks.

The block doesn't support adding caption/title/description??

Hi,

You mean move to center?

On 9/27/2021 at 2:54 AM, mheine said:

Hey tuanphan - does this example require custom css? I would like to add a similar filter/search to a store 

Hi. It requires CSS & Script code (need a Business Plan or higher).

Use this Filter Plugin. You can create filter features, support both Gallery Page, Portfolio Page, Blog Page, Product Page, Summary Blocks. 

You can also use it to add search, sorf by Price/Alphabetically,...

If you need a simpler filter feature, use this plugin.

and if you have no budget, you can message me, I can help you setup a simple filter feature (free).

On 9/27/2021 at 2:46 AM, CoralDerfurt said:

Hey, 

I'm having the same issue, please could someone help me with a code for this gallery section on my site. It looks perfect on desktop but zooms in on mobile, I just want it to not zoom in. 

Thanks,

Coral

Hi,

Can you share site url? We can help easier

@JennWalker Can you check site url? The site url doesn't exist

On 9/27/2021 at 1:50 AM, karadia said:

Hi! Here it is: https://www.aradia.io/checkout/order-confirmed?oid=6150c0c3c950045ccb55cda2&authCode=NjE1MGMwYzNjOTUwMDQ1Y2NiNTVjZGEyOjIwMjEtMDktMjZUMTg6NDk6MzkuMTc0WspeG2EZvEOlULp15jmWHK89r-nUZJXQuVLuWF4xh-fx

I'd love to be able to customize the formatting here so it can make the rest of my beautiful site. Thank you!

Can you setup a $0 product then share link? We can purchase it & access order confirmation page easier

On 9/27/2021 at 1:45 AM, happyscone said:

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

Add this to Design > Custom CSS

/* Mobile-center menu overlay icons */
@media screen and (max-width:767px) {
.header-menu-nav-folder.header-menu-nav-folder--active>div>div:nth-child(n+5) {
    position: relative;
    left: -6.5vw;
}
}

Hi,

Can you share site url? We can help easier

On 9/26/2021 at 11:33 PM, Botulin99 said:

Hey, thank you, but unfortunately it is not moving?

Try this new code

body.homepage article section:first-child {
    padding-top: 50px !important;
}

On 9/26/2021 at 10:21 PM, stellaehabib said:

@tuanphan ah ok. thank you - that does work. so to clarify, it is not possible to change to colour on hover for individual images? like if I wanted to apply this to the resources page, for example? 

Hi,

The resource page url doesn't exist

On 9/26/2021 at 9:56 PM, mr_leone said:

Hi @tuanphan, thank you for that!
It actually works on the Budlight page. How do I make it work on all the other pages?

Thank you for your help!!

Can you share link to all pages where you have problems? We can give code easier

On 9/26/2021 at 8:58 PM, dl_23 said:

Hey @tuanphan

Sorry, just saw this!

site: https://tarantula-porcupine-bkrr.squarespace.com/

The password is 1234

Hi,

You want to move this?

Hi,

#1. Mobile - https://www.falconsolutions.ca/digital-gallery

Add to Design > Custom CSS > Save & reload the site to fix it

/* resize gallery reel on mobile */
@media screen and (max-width:767px) {
.gallery-reel {
    height: 50vh !important;
}
}

#2. Tablet

Add to Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
div#block-c01eda114cb487cd941d [href*="/contact"] {
    white-space: nowrap !important;
}
}

22 hours ago, SUN1992 said:

Hi @tuanphan thank you so much for homepage it worked!! but I meant in the different categories, when you go to Shop > Dresses / Outerwear / Knitwear / Tops and Shirts / (and all the different categories) 

 

Hi,

I see no products in Outerwear / Knitwear. Can you check it again?

With Tops & Shirts, use this CSS

@media screen and (max-width:640px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 10px;
}
}

On 9/25/2021 at 8:06 AM, MorganePinet said:

Amazing ! thank you for your help !

Just a suggestion. The FAQ link in footer, link to 404 page.