ArtificialVisions

Hi TuanPhan,

I've just published the site live 🙂

I'm not sure why there isn't an option to align blog content on mobile, but I'm wondering if theres a CSS method to do this, but my images won't align with my text content and it looks messy, as seen in this example:

Thanks tuanphan!

choucair-capital.com 🙂

Perfect thank you!

I've tried this code to centre my mobile menu underneath my logo, but when my site is live the menu is slightly off centre to the left, is there a way I can align so its central?

div.header-display-mobile {
    flex-direction: column;
}

/* change menu text size */
.header-menu-nav-item a {
    font-size: 35px;
}

Hi, thanks for your response,

That still didn't work unfortunately. 😞

https://choucaircapital.squarespace.com/config/

Dinosaur452

I'm not able to change my category blocks on my blog posts and summary blocks to different colours, i followed a similar thread and copied the CSS and adjusted it accordingly but it still didn't work.

I tried this, but nothing changed, I'm wondering if its because I'm using a single column blog style?

a.blog-categories[href="/blog/category/Ongoing"] {
    background-color: #0CC0DF;
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

span.blog-categories-list a {
    padding: 0.15em 0.1em 0.15em 0.15em !important;
    color: #fff !important;
    letter-spacing: .8px;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}
/* Ongoing */
span.blog-categories-list a[href="/all-topics/category/Ongoing"] {
    background-color: #0CC0DF;
}
/* Completed */
a.blog-categories[href="/all-topics/category/Completed"] {
    background-color: #0CC0DF;
}

Hi All,

I'd love to be able to achieve this but I'm not sure what I'm doing wrong, here's a screenshot for example:

I used this:

span.blog-categories-list a {
    padding: 0.15em 0.1em 0.15em 0.15em !important;
    color: #fff !important;
    letter-spacing: .8px;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}
/* Ongoing */
span.blog-categories-list a[href="/all-topics/category/Ongoing"] {
    background-color: #0CC0DF;
}
/* Completed */
a.blog-categories[href="/all-topics/category/Completed"] {
    background-color: 0CC0DF;
}
.sqs-block-summary-v2 .summary-metadata-item {
    opacity: 1 !important;
}

I've managed to change the individual pages font, but I can't work out how to change the font on the page where it displays all the blog posts.

https://choucaircapital.squarespace.com/config/

Dinosaur452

I've used this for the posts themselves:

.blog-item-title h1 {
    font-family: 'FontTitle' !important;
}

Thank you so much, I apologise I didn't see your response before. 🙂 

You are a genius! haha, Thank you so much Lesum 😄 

I want my gallery on my projects page to have a box above the images that looks like this image I've attached.

I want it to change every time you slide through a different project, so for example "completed, ongoing" etc or does anyone know a way I can do this differently or any plugins I can use etc? 

This is my current website so you can view the projects page for example:

https://choucaircapital.squarespace.com/config/

Dinosaur 452 

Apologies I didn't get a notification for your response, here are the details 😄 

choucaircapital.squarespace.com

Dinosaur452

I currently have some CSS for a custom OTF font I uploaded, It works across all Headings except the newsletter form.

I have tried a few methods I've found on these forums, but nothing has worked, it just changes it to the paragraph font, this is what I've used so far:

@font-face {

    font-family: 'FontTitle';

       src: url('https://static1.squarespace.com/static/6655e8b66a3cb20d523b1bd1/t/666887df7db23d789c82b082/1718126559744/PPTelegraf-UltraBold.otf');

  }

h1 {font-family: 'FontTitle';}
  h2 {font-family: 'FontTitle';}
 h3 {font-family: 'FontTitle';}
h4 {font-family: 'FontTitle';}

h1.newsletter-form-header-title {
    font-family: "PPTelegraf-UltraBold" !important;
} 

I've managed to change the header fonts with a OTF font I've uploaded called PPTelegraf-UltraBold.otf

But I can't work out how to change a newsletter title font. 

I've used:

.newsletter-block .newsletter-form-header-title {
    font-family: 'PPTelegraf-UltraBold.otf' !important;
}
.newsletter-form .newsletter-form-field-element {
    font-family: 'PPTelegraf-UltraBold.otf' !important;
}
input.newsletter-form-field-element.field-element::placeholder {
    font-family: 'PPTelegraf-UltraBold.otf' !important;
}
span.newsletter-form-button-label {
    font-family: 'PPTelegraf-UltraBold.otf' !important;
}

But it hasn't worked.