jesswp

4 hours ago, tuanphan said:

Add this code under code I sent

<style>
  .header-display-desktop .header-actions.header-actions--right>div.language-picker {
    display: none;
}
</style>

and try checking to see if language picker still works properly or not.

Hi @tuanphan

 It still seems to be cutting off unfortunately when I am in incognito mode. See video attached! 

On 9/4/2022 at 10:48 PM, tuanphan said:

Add to Last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.header-display-desktop .header-actions.header-actions--right').clone().appendTo('div#wm-subnav>nav');
	});
</script>
<style>
  div#wm-subnav .header-actions-action.header-actions-action--cta {
    display: none;
}
</style>

 

It seems to be appearing in both places now? @tuanphan

It also seems like it's cut off when viewing incognito mode.

On 8/28/2022 at 5:29 AM, tuanphan said:

Move this?

Hey @tuanphan! Just wanted to see if you have an update for this by chance. Hope you are having a great weekend.

On 8/28/2022 at 5:29 AM, tuanphan said:

Move this?

Yes @tuanphan!!!

Hi @tuanphan (or anyone else that can assist!)

I am wondering if you can help me move the Weglot translator to my secondary nav where the green bar is instead. Right now it's positioned right next to the CTA button in the primary nav. I am in Fluid Engine.

Thanks!

https://flute-herring-aws3.squarespace.com/
pass: art

2 hours ago, tuanphan said:

You mean

• Header under banner (homepage only)
• Keep header sticky to top on scroll?
• Is this right?

Yes. Essentially how I have everything right now just moving the nav header under banner on home page. Id still like the header logo to shrink as they scroll. Thanks!

Hi again @tuanphan:

I am looking to set an image behind a text box and was wondering if this is achievable? See attached image.

https://collie-blue-teb7.squarespace.com/about

Thank you for your help.

Hi there @tuanphan @bangank36,

Got a little lost in this thread. I am trying to implement something similar for a client's site where the header nav is below the hero banner JUST for the home page. Is this doable? 

https://collie-blue-teb7.squarespace.com/home
attached image for what I'm trying to achieve.

Ideally Id like to keep the scroll action where the logo is smaller when scrolling.

Thank you for your time and attention.

@tuanphan This has been a helpful thread. I am looking to do something similar with 7.1 Blog page width. What would you target for JUST the blog list (basic blog grid), and not the other sections below (i..e freebies, etc.)

https://haddock-cow-8ae7.squarespace.com/
pass: coach

This is what I have so far but it's targeting the entire page.

/* Main Basic Grid - Page Width */
@media screen and (min-width:768px) {
  .collection-type-blog-basic-grid.view-list main#page {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}
}

Thank you very much in advance.

9 hours ago, tuanphan said:

Hi,

Which page are you referring to? I don't see accordion on homepage

We ended up going with a different design! Thank you anyway 🙂

Hi @tuanphan,
Do you mind helping me reorder the blocks for the services page for mobile?

I'd like each section to go:
image
title + description
accordion
button

https://haddock-cow-8ae7.squarespace.com/
pass: coach

thank you!

15 hours ago, tuanphan said:

It looks like you solved it?

Hi!

There is still odd spacing on mobile .. probably because I use the "space bar" in between nav items on the desktop site. Is there a way to make it look spaced out on desktop but not spaced out on mobile but have it centered.

Hi @tuanphan - is there a way to fix this for image card as well for bullet points?

https://plum-ocelot-fakz.squarespace.com/

pass - spine

Hi @tuanphan! Any suggestion to line this up?

https://plum-ocelot-fakz.squarespace.com/
pass: spine

I tried the below..

/* Mobile footer links */
@media screen and (max-width:767px) {
div#block-bd09f58bfc07aae9ce64 h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center important!;
}
div#block-#block-bd09f58bfc07aae9ce64 a + strong {
    display: none;
}
div#block-#block-bd09f58bfc07aae9ce64 a {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
}
}

On 1/4/2022 at 2:45 AM, tuanphan said:

change number 1 to 0, it should be

/* Mobile Flip Card */
@media screen and (max-width:1024px) {
div#page-section-61c2418ff128ce7319b1cb48 {
.design-layout-poster figcaption.image-card-wrapper {
    opacity: 0 !important;
}
.intrinsic {
    width: 100% !important;
}
}}

 

THANK YOU!!!!! @tuanphan that worked perfectly.

5 hours ago, tuanphan said:

You mean: Show title under image + Hide description?

@tuanphan 

I am using a text block to showcase the title so those are already showing on mobile (see image). The poster image block isn't showing at all on mobile - wondering if it's possible to show just the image, no description or roll-over flip.

16 hours ago, tuanphan said:

Don't remove/edit any code. Add this to Design > Custom CSS

/* Mobile Flip Card */
@media screen and (max-width:1024px) {
div#page-section-61c2418ff128ce7319b1cb48 {
.design-layout-poster figcaption.image-card-wrapper {
    opacity: 1 !important;
}
.intrinsic {
    width: 100% !important;
}
}}

 

Hey @tuanphan, thank you. It ended up looking like this with backward text displaying on the image ...

Is it possible to just have the images showing, no flip? I think that'll be easier and more user friendly on mobile/tablet.

Thanks!

Hi @tuanphan @creedon

I currently have the image as poster blocks and when hovered, it flips over to text image card.

Obviously this isn't good design for mobile. I'm wondering if there is there a way to switch eliminate this and have the image stacked on top of text like how it would normally?

Home page: https://violin-salmon-ljp3.squarespace.com/ (pass: massage)

This is what I have right now in CSS

/*Rollover images ICA*/
section[data-section-id="61c2418ff128ce7319b1cb48"] {
@media only screen and (min-width:640px){

.design-layout-poster img{ transition: 1s}

.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1.5s} 

.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1.5s;}

.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: gray; transition: 1.5s;}
  }
}

On 11/17/2021 at 9:48 PM, tuanphan said:

#1. Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-section-613aad3fe6c15c6a5b17c1e5>.row>.span-5:last-child {
    display: flex;
    flex-direction: column-reverse;
}
}

#2. You mean text on left image on right on all devices?

Thank you @tuanphan!

Re: #2 - similar to picture 1 (mobile). Except looking for text top, image bottom.

@tuanphando you mind also doing the same on this page! vanityskinclinic.com

text (treatments) -photo - text (shop) -  photo 

With regards to hero banner and the intro section, do you know why the image/background aren’t splitting properly despite using the same CSS? (See attached). I’m looking for the “about” section to match the hero on mobile.

Thank you so much!!

16 hours ago, tuanphan said:

Just add a Line in screenshot postion. (Add, then remove it)

 

OK I did that

On 11/8/2021 at 8:46 AM, tuanphan said:

Hi,

Before I check & sent the code. You can add a Line Block here, then remove it, then let me know. I will start checking the code.

So I was using multiple spacer blocks to split up the content (left column text / middle  spacer / right column text + playlist). I can't add a line that goes under all 3 spacer blocks/columns.

I added a line on top of the playlist but do you need a line all across? 

16 hours ago, tuanphan said:

You mean

I want photo

I want text

I believe photo

I belive text

Ready to get

Playlist

is this right?

yes that's the correct order!

On 11/5/2021 at 10:21 AM, bangank36 said:

Try in Home > Design > Custom Css

#announcement-bar-text-inner-id p {
  font-size: 9px !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

YES! Thank you so much!!

Hey @tuanphan! Looking to swap order for a few of the blocks... do you mind helping?

https://snail-sprout-zgz3.squarespace.com/about
pass: workout

Black section towards the middle/bottom -- Looking to swap picture #2 with "get ready to bounce on".

Order should go photo #1, text, photo #2, "text, "title header: get ready to bounce", spotify playlist.

Thanks so much!