JTeich

8 minutes ago, Ziggy said:

1. Go into styles and spacing and change the site page width to be as wide as you need for the design, but be aware that the wider you make it the harder it is to make the design work well on tablet sized screens.

2. The space is appearing because you only have one section and it is not tall enough to fill the space, set the section height to L (Large).

Hello!

Thanks so much for your quick response.

The first one was an easy fix, thanks for that. The second one i *think* i've got. So i made the "page width" wider... which made the text have *more* of a margin. That doesn't make much sense to me (you'd think it would give it less margin) and also you'd think the MARGIN setting would be the one helpful to make the margin bigger, but you're totally right, the margin setting does nothing.

Also just for future users who might have this problem - You then have to go back and move the text again, unlike with the margin setting where you see the results as you move the slider.

Thanks again. I'm not sure how this might affect tablet screens, (since it creates a *bigger* margin) but i'll try to find one to see if it's ok!

Thanks again :)

Hello,

I'm having two problems with padding on my site. I'm using 7.1 and i'm sure there's an easy solution, but i can't figure it out.

https://www.bankerladiescouncil.ca/   1. As you can see in the first image the text is falling off the left side of the browser. The editor does NOT allow me to move the text over just a little bit. It only gives me the option to move it over to the right A LOT.

Image showing the text too close to the left

Image showing how it only allows me to move the text over A LOT - too much.

2. https://www.bankerladiescouncil.ca/contact   As you can see in the picture below, my contact page has a white bar at the bottom i can't get rid of. 

Any help with either of both of these problems would be greatly appreciated. 

On 11/4/2023 at 6:38 AM, tuanphan said:

Use this CSS code

body.view-list h1 {
    color: #f1f !important;
}

 

Thank you so much!

I put this code in the blog settings -> advanced, and changed the code to read "white" instead of #f1f.

Not sure if that's what you intended, but it worked.

You're amazing as usual.

Hello,

I can't seem to figure out how to change the H1 on this page https://africanaeconomics.com/defys2?author=6380f1ab1ba71d0ca39f6658 without it also changing the H1 on each individual page like this one https://africanaeconomics.com/defys2/2023/10/28/dr-suzanne-bergeron and this one https://africanaeconomics.com/defys2/2023/7/11/dr-ebun-joseph

I've tried putting different kinds of code in different heading areas etc.

Thans so much!

Thanks so much, Tuanphan!

I was very confused at first, not being able to find this "list" section you were talking about, but it turns out you have to turn off Squarespaces's fancy "fluid engine" feature! This gives more design options.

I indeed found what you were talking about, and it's exactly what I need. Unfortunately the autoscroll feature seems to only be accessible to Business accounts.

All the same, this was the solution, so thank you so much!

Hey!

I don't think i know what you mean. Is this a type of gallery section? I've tried the slideshow gallery, with automatic cycling, but the text is always below the image, not on it. I've replicated this to show you, if you go to the page now. 

I've tried a summary block with blog posts. It doesn't allow a summary of gallery images, although i have a gallery here. (This isn't the gallery i would use, but it's good enough to figure out the problem)

https://roscafederation.squarespace.com/gallery-2

Making a summary of the quotes in blog form also doesn't work

https://roscafederation.squarespace.com/quotes

"List Section Banner Slideshow" is honestly random words to me :(

Could you have a look and also tell me more about "List section banner slideshow"?

Thanks so much

Hello

https://roscafederation.squarespace.com/
 password: roscabanktime

This is my first time working with 7.1, and i thought for this website it would be nice to have automatic quotes cycle through on the homepage. I've tried several different things without code, but it doesn't seem possible to do this whether it's with a photo behind it or not. As you can see from the link above I have tried several different things.

The first one is using a summary block of blog posts, but there's no option to cycle through quotes, only how many to show.

My second attempt, as you can see below that, I tried to use gallery images (the same image over and over) with quotes. But there doesn't seem to be a way to put the text ON the image, only below the image.

So my question is: Is there a way i can have some quotes cycle through on the page? At this point i don't care if i can, or have to, put an image behind the quotes.

I hope my question makes sense. 7.1 is driving me a bit crazy 🙂

EDIT: I've had to remove my attempts to make the site presentable, but am still interested in help.

Thanks!

On 1/7/2023 at 3:43 AM, tuanphan said:

Add to Africana Portal Page Header

<style>
  nav.Index-nav>div>a:nth-child(2) .Index-nav-indicator {
    background: green !important;
}

nav.Index-nav>div>a:nth-child(3) .Index-nav-indicator {
    background: #f1f;
}

nav.Index-nav>div>a:nth-child(4) .Index-nav-indicator {
    background: blue;
}

nav.Index-nav>div>a:nth-child(5) .Index-nav-indicator {
    background: black;
}
</style>

 

Thank you so much!

Hello,

I'd like to change all the colours of the index navigation bullets for ONE section.

 These are the bullets currently. There are great for everywhere else.

These colours (orange, purple, and teal) are fine for everywhere else I need them to be different colours for this page  https://africanaeconomics.com/africana-portal/

I know it has to be something like the following

<style>
#collection-638633baa89b9902cf5927fa{

.tweak-index-nav-style-faded-dots .Index-nav.overlay .Index-nav-indicator {
background-color: rgba(255,0,116, 0.8);

.tweak-index-nav-style-faded-dots .Index-nav-item.active .Index-nav-indicator {
background-color: #1034A6;
}

</style>

Thanks so much guys!

https://africanaeconomics.com/africana-portal/

18 minutes ago, Ziggy said:

Try this:

.search-input::placeholder {
    color: white !important;
}

 

Perfect! Thank you so much!

6 hours ago, Ziggy said:

You can try this to help it stand out, add to Custom CSS:

.sqs-search-ui-button-wrapper {
    background: rgba(0,0,0,0.4);
}

Hope that helps!

Thank you so much! I need to change the colour of the text too though. I've tried a couple different things to no avail. Here's one attempt that doesn't work 🙂

}
.sqs-search-ui-button-wrapper {
    background: rgba(187,93,129,0.7);
   p {
    color: white !important;
  }}

Here's what the Search Block looks like now

Thank you so so much.

Hello,

I need to insert a Search Block on a couple pages of my site. The reason it has to be a search block and not a search heading is i needed to hide the header on this sequence of pages.

Although it's possible to customize the search bar heading in "Site Style", this does not seem to be the case for a Search BLOCK.

If you look at this page here https://africanaeconomics.com/portal-main you can see that the search bar is barely visible. So i need to be able to change the colour, font, etc. 

Does anyone know how i might do that?

4 hours ago, Beyondspace said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668448990919_3400 {
    width: 100%;

  }
  #block-yui_3_17_2_1_1668448990919_3400   .intrinsic {
    width: 50%;
    float: left;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Thank you so so much! One thing though.

When i look at it in the squarespace mobile preview it looks great, like this

But when i pull it up on my own phone, it looks like this. Would you have any idea why that might be? I thought it might be because my screen is extra large (1440 x 2880 pixels), but it doesn't seem to matter what number i substitute for 640px.

Thank you so so much!

In my footer i have an image with text (card format). It looks great on a full screen because the text appears to the right of the image. But on tablet and mobile it moves the text to below. Is there a way to keep the text always to the right of the image?

Here's the URL again https://africanaeconomics.com/

For clarity here are some images

1. How it looks on full screen (and how i would like it to appear on all devices)

2. How it appears on tablet

3. How it appears on mobile

If it helps this is my custom code (in footer)

<style>
  /* portal mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1668448990919_3400{
  width: 50%;
  }
}

/* portal tablet screens */
@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668448990919_3400{
  width: 50%;
  }
}

  /* contact mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1668546648499_3526{
  width: 35%;
  }
}

/* contact tablet screens */
@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668546648499_3526{
  width: 55%;
  }
}

</style>

Thanks so much guys!

1 hour ago, tuanphan said:

Which elements you want to change order on this page?

Hello! Thank you so much!

Everything is in proper order if looked at in a full sized screen. The first two images reflect this with "Episode 1: Dr Michelle Stack", and her podcast right under her blurb (i have a separate question asking if the audio file can pop out in its own window).  Then I have "Episode 2. Upcoming" Dr. Sharon Austin's profile, and will have her podcast below (or hopefully in a pop out window).
I've attached images of what it looks like on mobile, where it bunches "episode 1: Dr. Michelle Stack" and "Episode 2: Upcoming" together, then the two blurbs of the guests, then Dr. Stacks audio file last.  

It would be great if the order on mobile could match the (proper) order on full screen size.

Thank you so so much!!

(So again, first two images: proper order; last three images: mobile view has it all jumbled)

S

19 minutes ago, tuanphan said:

You mean change image 2, 3 to make same as image 1?

Yes. So image 1 is just an image that's been edited to have text on it. The whole thing is one image. The problem with having it all be an image like that is the text is all fuzzy. So if I can have the image be without text, and then have actual text on top if it, it would make the whole thing look better. So images 2 and 3 are both attempts at making text on top of the image, but it's not quite right. I want the text to be placed the way it is in image 1. 

Thanks

36 minutes ago, tuanphan said:

data-section-id, if you use 7.1

If you use 7.0 & Index template, you can target Index Section ID.

If the template doesn't support Index page & is not 7.1, no way to target with tool

You can share link to page where you have problem, we can check & give id for you

I would love your help! 

The page is version 7.0 Hyde template (Brine family). 

I'm not using an index page, but i guess i could try to change it?

The page is https://africanaeconomics.com/diverse-economies-for-youth

Thank you so much!

26 minutes ago, tuanphan said:

It looks like you removed Click Here. If you still need this, let me know, I will try this on my test site

Hello! Yes i would very much like some help. I'll put back the link if you think it'll make it easier.

There is now a link for you. (although i'll have to work on it's appearance as it appears pink makes it hard to see)

Thank you so so much!

21 minutes ago, tuanphan said:

Hi,

What should it look like? We can help easier

Hello! It should look like the first image above, thanks so much!

2 hours ago, tuanphan said:

You can use data-section-id, instead of #page

Use this tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hello,

Thanks so much for your help.  That link you included in your comment takes me to an app I already have. I included the screen shot of what the page looks like earlier when looking for the "data section id". I'll included an other photo.

Thanks again

Hello,

I'm attempting to put a small amount of text over an image, but would like it to be justified on the right hand side, so that the focal point of the image can be seem.

I have tried two different ways and they're both just not quite right. 

The below image show

1. How i'd like it to look

2. How both attempts look

EDIT: I'VE HAD TO COPY THE PAGE AND MAKE THE ORIGINAL PRESENTABLE, BUT I WOULD STILL LOVE LOVE SOME HELP.

GO HERE:  https://africanaeconomics.com/diverse-economies-for-youth-copy

Code attempt #1

<style>
  
#block-yui_3_17_2_1_1665680081272_6523

h1 {
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
h2 {
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
h3 {
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
</style>

Code attempt 2

<style>
  /*icon text colour*/
  #block-yui_3_17_2_1_1665680081272_6523
    p { 
  color: white !important;
  font-family: Optima, sans-serif !important;
}
    .design-layout-poster .image-title-wrapper {
    display: flex;
    align-items: top-right;
	justify-content: flex-end;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

  </style>

The URL again is

https://africanaeconomics.com/diverse-economies-for-youth

EDIT: 

EDIT: I'VE HAD TO COPY THE PAGE AND MAKE THE ORIGINAL PRESENTABLE, BUT I WOULD STILL LOVE LOVE SOME HELP.

GO HERE:  https://africanaeconomics.com/diverse-economies-for-youth-copy

Thank you so much!

On 12/4/2021 at 3:24 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-About page order */
@media screen and (max-width:767px) {
div#page-section-618646688a7f99372a838ff6>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

How did you find the "page section"? 
I'm having the same problem where the titles are bunched together on mobile. On desktop and tablet they're fine, but on mobile it looks like image #3 where it says "Episode 1. Episode 2. Upcoming)

Thanks so much

Yes, exactly.

Site URL: https://africanaeconomics.com/diverse-economies-for-youth

I'm making a podcast page and would like to have a little blurb about each guest and then when you press a text link the audio player will pop out into a nice little new window. Is this possible?

Scroll down to bottom and you can see the bio and the interview audio block that is embedded instead of being popped out with a link

https://africanaeconomics.com/diverse-economies-for-youth

Thanks so much!

48 minutes ago, bangank36 said:

You can check my previous code.

we get the error due to some wrong ";"

Wow, i thought i had just copy and pasted (and tried it several times). Thank you so much!

It works :)