Jump to content

RebelRuth

Circle Member
 View Profile  See their activity

  • Posts

    37

  • Joined

  • Last visited

 Content Type 

Everything posted by RebelRuth

  1. RebelRuth
    Hey Ziggy, Sure. So this website is for a client who is an artist, and the pages I'm having issues with are her title pages, as part of a portfolio. There are 4 sets of pages like these. (Stella McCartney, Selfridges, Chrome Hearts and Artist Collab). For example, if I click on the 'Selfridges' page, you can see especially on mobile view that the padding at the top is a little bit more than the bottom on the example below. I'd like the text to sit in the middle with even padding. The code that I have used is; To create a bit of space betweeen the title (Superself) and subtitle (Selfridges 2022), adjust font size of subtitle, the hover over code to reveal the text, and some other spacing coding below: /* section spacing on sub heading Selfridges*/ #collection-64437dcdecdf542720739ff5 { h1, h3 { margin: 0px !important; } h1{ margin-bottom: 20px !important; } } * Selfridges - Space between h3 subtitles */ body#collection-64437dcdecdf542720739ff5{ h1 {margin: 10px !important;}} @media only screen and (max-width:767px) { /* smaller h3 on selfrdiges Mobile projects page*/ #collection-64437dcdecdf542720739ff5{ h3 { font-size:13.5px !important; }} } /* section hover Selfridges*/ @media screen and (min-width:992px) { #collection-64437dcdecdf542720739ff5{ section:after { content: ""; background-color: rgba(0,0,0,0.0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease; } section:hover:after { opacity: 1; transition: all 0.3s ease; } section .html-block { opacity: 0; transition: all 0.3s ease; } section:hover .html-block { opacity: 1; transition: all 0.3s ease; }} } Happy to send you the whole code for the site, if that makes more sense! Thank you
  2. RebelRuth
    Hey @Ziggy I looked at the spacing, however didn't help Let me know if the above isn't clear and I can re-explain / start again! Best, Ruth
  3. RebelRuth
    @Ziggy Will take a look now, thanks for that suggestion!
  4. RebelRuth
    @Ziggy Me again but on another issue I'm having - could you help me here too?! I am very stuck!
  5. RebelRuth
    @Ziggy THANK YOU!! It works!! 😀
  6. RebelRuth
    Hey @Ziggy Thanks for that - I've just tried that and sadly nothing has changed. Can you think of any other solutions? Best Ruth
  7. RebelRuth
    Hi, Thank for the tips above, I've tried to apply the same to my footer and it works but only on one of the text ID blocks, really weird that it works on one and not the other! The code I am using is: @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1705006258059_14874, #block-c84e76b20faf907912e8, { text-align: center !important; }} You can see in the screenshot, I'd like the Go-to and Contact text boxes to be aligned centrally on mobile only. On desktop I have one aligned to the left and one aligned to the right which I am happy with. Website: www.claretestar.com Dodger50! Thanks in advance
  8. RebelRuth
    Hey @tuanphan Sadly the code above hasn't worked - is there anything else we can try? TIA
  9. RebelRuth
    Hey @tuanphan, are you able to help me with a solution? Thanks so much
  10. RebelRuth
    Hi @tuanphan, Yes for example, on a page like this > https://www.claretestar.com/stellamccartney PW Dodger50! It's on the mobile view. Thanks
  11. RebelRuth
    @tuanphan - https://rectangle-cardioid-z6nt.squarespace.com
  12. RebelRuth
    Hi all, I'm having a bit of trouble with some spacing. I've coded a bit of padding between my heading and subheading, however it has pushed down the text so the overall padding is a bit uneven. The code I have used is... body#collection-6464a7b405df9b56279099c1{ h1 {margin: 10px !important;}} Which has added 10px spacing between the text below 'Artistry' and 'Chrome Hearts', but as you can see, the gap at the bottom is now too small and uneven from the top spacing. I'd like to keep the 10px padding between the heading and subheading, but have even padding top and bottom. Can someone help? Thanks in advance! PW: Dodger50!
  13. RebelRuth
    Thank you @tuanphan - saved the day!
  14. RebelRuth
    Hello, I'm having a few problems with one of my clients' website. She would like a different version of her logo to be on a mobile view, I have tried some code but the image isn't showing in full. I've used this code: @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1692109429145_3484 img { content: url(https://static1.squarespace.com/static/62681359eb930e7e05951164/t/659f02656aaf303002d9c892/1704919653971/Clare_Logo_Dev_Final-06.png); height: auto !important; top: 0% !important; padding-bottom: 0% !important; transform: translateY(-50%); } } But this is how the image is showing? It's meant to be like this... What bit of code am I missing, to show this logo in full, but to still keep the logo the same on desktop? PW: Dodger50! https://rectangle-cardioid-z6nt.squarespace.com/config/?frameUrl=%2F Thanks in advance, Ruth
  15. RebelRuth
    Hi Tuanphan, Me again! Is there a way to disable this hover effect on a mobile view, please? Thanks, Ruth
  16. RebelRuth
    Fantastic, thank you - works brilliantly
  17. RebelRuth
    Hello! I'm trying to reduce the spacing here, I'd like to move the smaller text (header 3) further up - just on this page. Eg below, the 'Stella McCartney' text needs to be closer to the 'Sheafed in Stella' text. I have this text multiple times throughout the page, so would like to apply this to the whole page. Pass: Dodger50! https://rectangle-cardioid-z6nt.squarespace.com Any ideas?! Thanks in advance!
  18. RebelRuth
    Thank you! All done!
  19. RebelRuth
    @Abdulrehman123 Me again! Could you show me how you would use a section-ID with the code you suggested above? The section ID is: section[data-section-id="64f70b8c0d3a781072966425"]
  20. RebelRuth
    @Abdulrehman123 Thanks for that! I've tried it, but it only works in the editor and not live - the same issue I was facing before. Any idea why?!
  21. RebelRuth
    Hey Tuanphan, Is there anything you can think of to fix the problem? Thanks!
  22. RebelRuth
    Hi Tuanphan, Sorry I might not have explained myself! So when I am in the editor mode, the CSS effect works, but when I am in live view it doesn't. I added a white background to the text to achieve the desired effect, which is why the top few appear white (I haven't done the bottom ones just yet). Also, when I am in the page live in browser, the effect only works when I hover my cursor in the navigation bar of Google Chrome - any time the cursor appears on the page, the CSS doesn't work. I have uploaded a video to try to show you (named Untitled)- please watch the cursor in the video so you can see. Untitled.mp4 And here in the second video (named Untitled 2), you can see this is live in a browser - it doesn't work at all. Untitled 2.mp4 So basically what we need to fix is: - CSS effect to work when live in browser - Chrome, Safari etc. - CSS to work when cursor appears on page (not when cursor is in browser) Hope that makes sense! Thanks
  23. RebelRuth
    Hi Tuanphan, Thank you! I've just tried to upload the CSS but it isn't quite working - can you check for me? Sometimes the images load, sometimes they don't - it's strange! I'd like all of the images to be visible first, and then when hover, over the text and white background appears, when hover off the image appears again. TIA
  24. RebelRuth
    Sorry, here you go! https://rectangle-cardioid-z6nt.squarespace.com/example-of-stella-page-one-section
  25. RebelRuth
    Hi Tuanphan, Thank you for your suggestion, the site now has all content within one single section, so we can target the whole section now! Please can you help me achieve the following? The page is: https://rectangle-cardioid-z6nt.squarespace.com/config/pages / Dodger50! So I would like to achieve the above, the hover-over effect that Becca created, for all text within the section. I would also like to decrease the amount of space between the heading and sub heading, as the gap is quite large - example below. I'd like to do this on all text on the site. Is it possible to target the whole section with 2 pieces of code? Thanks in advance!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources