juliaprather

On 2/23/2022 at 6:11 AM, tuanphan said:

To set headaer solid color on blog posts only, add this to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-image: linear-gradient(#0e68ed,rgba(14,104,237,0)) !important;
}

 

Gorgeous! Problem solved!

On 3/6/2023 at 4:15 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile button */
a.theme-btn--primary.btn.sqs-button-element--primary {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: unset !important;
}

 

Outstanding, @tuanphan! Thank you sooo much. Mobile CTA button looks so much better now!

On 2/21/2023 at 4:53 AM, tuanphan said:

What is your site url? We can check easier

The URL is https://borrowhappy.com/. Thank you!

On 2/28/2023 at 3:42 AM, Ziggy said:

Try this Custom CSS:

@media only screen and (max-width:767px) {
  .sqs-announcement-bar-text {
    padding: 0.8em 1em;
  }
}

Let me know if that works for you!

Well how do you like that?? Worked like a charm. Thank you, Ziggy!

On 2/13/2023 at 4:52 AM, Ziggy said:

Can you share your website URL?

How much padding do you want on mobile?

Ziggy, thanks so much for responding! The URL is https://borrowhappy.com/.

Per the attached images, on desktop view, the phone icon in the announcement bar lines up with the left margin of the site. But on mobile, even when aligned left, the content in the announcement bar does not line up with the left margin of the site, which I would like it to do.

Thank you!

Facing these same issues. Don't even know how to begin. Attached is an example: I'm using Paragraph 1 in the footer and am getting a message to label these titles built as text tags. Umm... huh? Sure would appreciate anyone who could tell me how to do this 🙏

https://borrowhappy.com/

Making another request that background images be given the option for alt text.

As @tcp13 mentioned, there may be a null alt tag assigned to background images which makes them technically compliant, but they still get caught by accessibility scanners.

Clients in industries which tend to be concerned with compliance do not understand this.

Hello Squarespace,

I'm in search of code to reduce the width of the CTA button on mobile, so there's not so much blank space on either side of the words, but without affecting the desktop view.

Thank you!

YES! Thank you @SquareRefresh!

I'd like to reduce left and right padding in the announcement bar, but only on mobile. I tried some code I found in this forum, but so far have only succeeded in reducing the padding of the header (which I don't want to do). Thanks!

Excellent, Paul. THANKS!

Hello people of Squarespace!

The first pic shows how the gallery looks on desktop, which is great. The second pic is on mobile. I'm trying to add vertical padding between the rows of items on mobile so you can easily tell which words go with which icons. Anybody got some code for that? Thank you!

https://www.j2tampa.com/

11 hours ago, paul2009 said:

This is due to a deliberate design choice by Squarespace in mid 2021 and is not a bug.

The focal point behaviour was intentionally changed ("to make it easier to centre"!) and this now prevents us moving it just a small distance from the centre.

There isn't anything you can do to change this behaviour. The only workaround is to use the image editor to crop part of the image so the focal point is where you need it - which is ironic because the focal point exists to avoid having to do this! 🤯

I encourage you to contact Squarespace Customer Care  to request that this feature be reinstated. Nothing will happen quickly (I already voiced my concerns in Sept 2021 and nothing has happened since) but at least it will help the product teams to understand the impact these poor design choices have on user experience.

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

Just pled my case with customer care. Be gone, snap-to-center!

12 minutes ago, paul2009 said:

This is due to a deliberate design choice by Squarespace in mid 2021 and is not a bug.

The focal point behaviour was intentionally changed ("to make it easier to centre"!) and this now prevents us moving it just a small distance from the centre.

There isn't anything you can do to change this behaviour. The only workaround is to use the image editor to crop part of the image so the focal point is where you need it - which is ironic because the focal point exists to avoid having to do this! 🤯

I encourage you to contact Squarespace Customer Care  to request that this feature be reinstated. Nothing will happen quickly (I already voiced my concerns in Sept 2021 and nothing has happened since) but at least it will help the product teams to understand the impact these poor design choices have on user experience.

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

Thanks, Paul. I appreciate your thoughtful reply, and I will pass along my concern to customer care in hopes of a future toggle switch to enable or disable the snap-to-center focal point feature. Thanks again!

On 12/9/2022 at 8:39 AM, tuanphan said:

Can you share link to page where you have problem? We can take a look

Thanks so much for following up on this! The site is www.j2tampa.com. 

When you move away from the center of the image, you can make fine movements with the focal point. You can move it just a tiny bit up or down or sideways or diagonally. However, when you get near the center of the image, the snap-to-center feature takes over and you're no longer able to make fine movements with the focal point.

The attached video shows my attempt to place the focal point right where I want it, and how the snap-to-center feature kicks in and jerks the focal point to the center, where I don't want it to be.

This only happens when you get close to the center of the image. If you move away from the center of the image, you can successfully make slight moves. It would be so helpful to be able to disable to the snap-to-center feature, if there is a way to do that.

Thanks again!

Aaargh I have this same issue and have had it for YEARS. I found my way to this thread right now because I am currently in search of some way to disable or override the annoying snap-to-center "feature." I really need to move the focal point just the tiniest bit. Has anyone figured this out?

8 minutes ago, creedon said:

Ah. I see the issue now.

Here's the deal. Your CSS for that calculator is based on bootstrap. BS is a website design system as SS is a design system and you are trying to have two different incompatible systems combine which causes issues.

Can you find a calculator that doesn't depend on a design system? One that is more standalone code wise?

Aha! Well, that's disappointing, but there'll be other good ones out there. I appreciate the explanation--now I can mourn the loss and move on lol. Thanks so much!

2 minutes ago, creedon said:

I'm not seeing anything unusual in the footer. Can you post a pics of good footer vs bad footer.

Thank you so much for lending your expertise!

The mortgage calculator widget I'm using here (https://www.j2tampa.com/calculator) is screwing up the footer on that one page. The code is below. It's in a code block, no code injection. 

This page (https://www.welcomehomefunding.com/calculator/mortgage-payment) is using the same calculator and their footer is fine. Where have I gone wrong? 

<meta charset="utf-8"><link rel="stylesheet" type = "text/css" href="https://www.cmgfi.com/CMGCalc.css"><script src="https://www.cmgfi.com/CMGCalc.bundle.js"></script><section id="calculator" class="calculator-section"></section><script> var settings={tabs:{highcharts:{column:{Interest: '#006787',Principal:  '#000000'},pie:{Principal: '#000000',Interest:  '#000000',Taxes: '#000000',Insurance: '#000000',MortgageInsurance:  '#000000'}},buttonColor:  '#000000',highlightedTextColor:  '#000000',highlightedTextColorLight: '#000000',headerColor:  '#000000',lo:  'false',loName:  ' ',loTitle:  '',loNmls:  '',loImageurl:  '',loLocation:  ', ',loPhone:  '',loEmail:  '',loMysite:  '',loApplynow: '',loLogo:''}}</script><script>  var params={navigateMode: true,calcMode:  'Mortgage',footnote: true,amortTab: true,displayLO: false}</script><script> var calc=new CMGCalc($('#calculator'),params,settings);  calc.init(); </script>

Calculator widget is pushing footer info out of place: https://www.j2tampa.com/calculator

Widget wasn't centered so I used code below. Footer is messed up even when code is removed, so problem seems to be strictly widget. Would really appreciate ideas for getting footer info back in place. THANKS!

div#block-yui_3_17_2_1_1668264007627_3338 .sqs-block-content {
    display: flex;
    justify-content: right;
}

Hello out there!

I've got rotating images that perform perfectly on desktop but glitch out on mobile before rotating. I really hope to figure out what's wrong so I can use rotating images now and in the future, but this glitch is a non-starter.

URL is https://www.j2tampa.com/loan-options. Code pasted below. Help help!
 

.design-layout-poster img{ transition: 1s}
.design-layout-poster:hover img{transform: rotateX(180deg); transition: 1s} .image-card-wrapper{transform:rotateX(180deg)!important; opacity:0; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateX(0deg)!important; background: #006787; transition: 1s;}

Hmmm... I notice the glitch does not happen on Android mobile, only on my iPhone 14. This Wordpress site, which I did not make, uses the same concept—but these rotating images don't glitch on my iPhone. What are they doing that I'm not doing?

On 9/7/2022 at 5:25 AM, Ziggy said:

If you upgrade and build the footer in Fluid Engine you have a mobile specific editing option with an 8 column grid, so you can do whatever you want in terms of column layouts. You could also achieve the same thing with a single code block with CSS grid for the two columns, that way you maintain the columns on mobile. 

Ziggy, have you actually tried this in Fluid Engine? It is not working for me AT ALL. I am trying to form two columns on mobile view only. My blocks move around arbitrarily from where I place them and dozens of extra rows keep getting auto-added. Enormously frustrating. If you can do it successfully, then I'll know it's purely operator error but gosh is it FRUSTRATING aargghh

On 2/12/2021 at 2:48 PM, alexandriam said:

That was it! Thank you!! So many ids to sort through. 🙂

Hello! I notice the two columns you're talking about are not currently lined up side by side on the mobile view of your site. Did you change your mind about how it looked or did the code stop working (or something else)?

12 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* Image caption underline */
.image-caption a {
    background-image: none !important;
    border: none !important;
    text-decoration: none !important;
}

 

Just when you think you have all the pieces of underline removal code lol. Thank you SO much—works perfectly of course. You always come through!

15 hours ago, bangank36 said:

I check that it is fine at the moment. Have you figured it out?

The problem did not get resolved. It looks better now because I changed from an inline image block to a poster. I just added a new sample. The first image shows the link underline I'm talking about: 

https://www.4101empedrado.com/services

Thank you so much!