Quick Custom CSS Questions

Site URL: https://goby-icosahedron-jc2m.squarespace.com/

Hello Friends!

I'm trying to implement my design (attached) to Squarespace in the best way possible and I have a few quick questions.

Here is the link, and password is circle20. I'm on the Business Plan.

Any help would be very much appreciated 🙂

--

In ‘Upcoming Events’;

• Can I move the date a few pixels away from the event title?

In ‘Recent Musings’;

• Can I set a different button style? (Black text on all white)
• Can I make two buttons closer to each other?

In ‘Faura Newsletter’;

• Can I align text to left?
• Can I change the text color from grey to black?
• Can I move the button down the newsletter and center it?
• And finally, can I reformat the Sign Up button so that it matches the button at the top (under the cover image)?

Right under the cover image,

• Can I make the text ('What is Faura?') upside-down (as in the original design) without using an image?

Thank you so much in advance!

All the best,
Ozan

Q1. Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1594164210024_4552 time.summary-metadata-item.summary-metadata-item--date {
    margin-top: 5px;
}

Q2. Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1594171468145_6775+.row .button-block a {
    background: white;
}

Q3. Add to Home > Design > Custom CSS

• Can I align text to left?
• Can I change the text color from grey to black?
• Can I move the button down the newsletter and center it?
• And finally, can I reformat the Sign Up button so that it matches the button at the top (under the cover image)?

/* align left input text */
div#block-b0537e9432db29a2d38d input {
    padding-left: 0 !important;
}
/* input color */
div#block-b0537e9432db29a2d38d input::placeholder {
    color: black;
}
/* butotn */
div#block-b0537e9432db29a2d38d .newsletter-form-button {
    background: white !important;
    color: black !important;
    border-color: black !important;
}

@tuanphan I can't thank you enough! I really appreciate every second you spend to help.

I have a few quick points to clarify if you don't mind:
 

• Should I assume that there is technically no way to put the Newsletter button 'below' the text fields, centered?
   
• Depending on the screen resolution, two buttons in the Recent Musings section look different. Sometimes they are one-line, sometimes two-lines, and sometimes inconsistent as in the attached image. Is there a way to fix this to one line?
   
• Is there a way to close the gap between those two buttons?

Should I assume that there is technically no way to put the Newsletter button 'below' the text fields, centered?

Can you describe in detail? Button under Last name field?

Depending on the screen resolution, two buttons in the Recent Musings section look different. Sometimes they are one-line, sometimes two-lines, and sometimes inconsistent as in the attached image. Is there a way to fix this to one line?

Add to Home > Design > Custom CSS

/* 2 buttons same line */
div#block-yui_3_17_2_1_1594171468145_6775+.row {
    display: flex;
}

Is there a way to close the gap between those two buttons?

/* receent musing buttons */
div#block-yui_3_17_2_1_1594171468145_6775 + .row .button-block {
    padding: 0 !important;
}

Thank you for all your help @tuanphan!

14 hours ago, tuanphan said:

Should I assume that there is technically no way to put the Newsletter button 'below' the text fields, centered?

Can you describe in detail? Button under Last name field?

Yes. In a second line, centered below the text fields. (You can see my very first attachment to see the original design)

14 hours ago, tuanphan said:

Depending on the screen resolution, two buttons in the Recent Musings section look different. Sometimes they are one-line, sometimes two-lines, and sometimes inconsistent as in the attached image. Is there a way to fix this to one line?

Add to Home > Design > Custom CSS

/* 2 buttons same line */
div#block-yui_3_17_2_1_1594171468145_6775+.row {
    display: flex;
}

Is there a way to close the gap between those two buttons?

/* receent musing buttons */
div#block-yui_3_17_2_1_1594171468145_6775 + .row .button-block {
    padding: 0 !important;
}

These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

On 7/24/2020 at 3:46 PM, ItsOK said:

Thank you for all your help @tuanphan!

Yes. In a second line, centered below the text fields. (You can see my very first attachment to see the original design)

These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

Hi @tuanphan,

Would you mind taking a look at these two last things?

Thanks a million!

On 7/30/2020 at 2:18 AM, ItsOK said:

Hi @tuanphan,

Would you mind taking a look at these two last things?

Thanks a million!

Q1. Button under text field, add to Home > Design > Custom CS

/* Signup under text field form block */
div#block-b0537e9432db29a2d38d .newsletter-form-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Q2. These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

Did you solve?

On 7/31/2020 at 2:20 AM, tuanphan said:

Q1. Button under text field, add to Home > Design > Custom CS

/* Signup under text field form block */
div#block-b0537e9432db29a2d38d .newsletter-form-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Q2. These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

Did you solve?

Code for Q1 worked perfectly! Thank you so much!

... and no, I couldn't find a solution for Q2.