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!

Hello all! Site URL: https://brendaweicai.com I have injected this code into the footer of my page for a quick back to top link: <a href="#top" class="t-top"><span class="arrow"></span>Top</a> <style> /* Back to Top */ .t-top { font-weight: 300; letter-spacing: 2px; font-size: 15px; text-transform: uppercase; text-align: center; line-height: 1.6; padding-left: 2px; padding-top: 4px; position: fixed; right: 30px; bottom: 30px; width: 40px; height: 40px; z-index: 999; background-color: transparent; color: #000; } .t-top .arrow:before { font-family: 'squarespace-ui-font'; font-style: normal; font-weight: 300; font-size: 20px; line-height: 1; -webkit-font-smoothing: antialiased; content: "\e02d"; text-align: center; display: block; vertical-align: middle; transform: rotate(-90deg); cursor: pointer; margin-left: -4px; } .t-top .arrow {display:inline;} </style><a href="#top" class="t-top"><span class="arrow"></span>Top</a> <style> /* Back to Top */ .t-top { font-weight: 300; letter-spacing: 2px; font-size: 15px; text-transform: uppercase; text-align: center; line-height: 1.6; padding-left: 2px; padding-top: 4px; position: fixed; right: 30px; bottom: 30px; width: 40px; height: 40px; z-index: 999; background-color: transparent; color: #000; } .t-top .arrow:before { font-family: 'squarespace-ui-font'; font-style: normal; font-weight: 300; font-size: 20px; line-height: 1; -webkit-font-smoothing: antialiased; content: "\e02d"; text-align: center; display: block; vertical-align: middle; transform: rotate(-90deg); cursor: pointer; margin-left: -4px; } .t-top .arrow {display:inline;} </style> I was wondering if it was possible to change the font that the word "TOP" is in? To Poppins if possible?

Thanks so much! It worked perfectly and I learned some new CSS!

Hello all! My url is https://brendaweicai.com and the site is currently public. The issue shown in the screenshots are here https://www.brendaweicai.com/classfindr at the very bottom of the page. Thanks for the tips @creedon!

Hello all! I'm trying to add two buttons at the bottom of the page signifying going onto the next or back to another case study in a portfolio. I found the CSS for the right arrow and it currently looks like Bakery Redesign pic with this code: .sqs-block-button-element:after { content: '➔'; color: #00000 !important; padding-left: 30px; margin:10px 10px 10px 10px; } But I also need another button that looks the same but with the left arrow(EatUnbound). Anyone have any idea how? Also the css applies to all the buttons I put onto the site now, is there a way to only affect these buttons? Thanks!