brendaweicai

Site URL: https://brendaweicai.com
Hello all! 

I've been working on my portfolio on my 32" monitor and realized that the layout is completely different after moving the browser to my 13" laptop. The spacing is super weird, not to mention the text columns that I can't seem to make it uniform. I've tried editing from my laptop instead of the monitor but obviously then everything is weird when I move it to my monitor.
I did figure out(with the help of this forum) that it's affecting buttons when the blocks are overlapped. When I went to my individual case study(https://www.brendaweicai.com/eatunbound) to fix the overlapping blocks and resize them to fix the spacing, the text blocks are STILL adjusting themselves as I move it laptop to monitor. This is still making weird spacing. 
The first pic is the after I've made sure none of the blocks are overlapping and the spacing is to my liking. The second is the EXACT same thing just on my larger monitor. 
Is this just how Squarespace works on the "responsiveness" across screen sizes? 
Is there a way I can adjust/fix with custom css(or anything really) so the spacing and everything else is uniform no matter the computer screen they're looking at it from? 
Thanks!

Thank you both!! It's working! 

Thank you both!! It's working! 

Hi Brenda, it looks like there's some incorrect code in your site - but not in the version you pasted above:

Have you added this '12px poppins' in your custom css panel? If so, delete 'poppins' from this line.
If you've added it to your footer code block, you'll need to delete the word from there as well and add another line with font-family: poppins; as Ziggy said, just wanted to make sure there wasn't a conflicted code as this isn't included above.

Yes, add this directly below .t-top {
font-family: poppins;

Because you are using button blocks and not some collection type that provides it's own back/forward navigation elements (not that there is one that would fit your needs), there is no way from the button block code to know which one is which.
The only CSS way to overcome this is to specify each button id so the CSS knows where to place the arrows.
/* next buttons */ #block-yui_3_17_2_1_1689892764837_8954 .sqs-block-button-element::after, #block-yui_3_17_2_1_1689952372864_12393 .sqs-block-button-element::after   {     content : '\2192';     font-size : x-large;     margin-left : 0.25em;          } /* previous buttons */ #block-bef4acd0c7addcb87c6d .sqs-block-button-element::before   {     content : '\2190';     font-size : x-large;     margin-right : 0.25em;          } Let us know how it goes.

Here is a LESS version of the code that can save some amount of repetitive typing.
// begin button block next/previous arrows, uses LESS syntax   // next buttons      #block-yui_3_17_2_1_1689892764837_8954,   #block-yui_3_17_2_1_1689952372864_12393        {            .sqs-block-button-element::after {                content : '\2192';         font-size : x-large;         margin-left : 0.25em;                  }                }          // previous buttons      #block-bef4acd0c7addcb87c6d {        .sqs-block-button-element::before {            content : '\2190';       font-size : x-large;       margin-right : 0.25em;              }            }        // end button block next/previous arrows, uses LESS syntax  

→ (alt 26)
← (alt 27)
-- didn't know it could be done via css. i've been adding directly to buttons. thx 🙂

share your site url pls?

Please post the URL for a page on your site where we can see your issue.
A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.
Please set up a site-wide password, if your site is not public and you've not already done so.
Post the password here.
Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.
Please read the site-wide password and how to share a link documentation to understand how they work.
We can then take a look at your issue.
You may find How to post a forum question post useful.

The font size should scale down as you shrink the page, I think that the two screenshots side-by-side are slightly misleading. In testing scaling the width the fonts only get smaller, but of course not enough to guarantee that the text stays on just two lines.