Phobic78

Yes, this works exactly as intended now, thanks a lot!

Thank you for this head up, @paul2009. I will use the product block. Is it possible for me to customise the button so that it isn't just a black rectangle? The button I have created is ideal but as you point out, it isn't going to link to the product as intended.

Thank you, @Web_Solutions. defining a div class worked. It sounds like the link to the product isn't going to work, which is a shame, but i greatly appreciate the coding lesson!

Thanks @Web_Solutions, that does help put the text in the right place, but the button itself is still off to the right of centre.

Site URL: https://tracytredoux.com/programmes/2-week-winter-detox-2023 Hi all, I have created a button for a sales page and centred it with the position:relative, left:50%, but for some reason it is aligning right of centre. Also, the text is appearing at the bottom of the button, rather than vertically centred. Strangely, this happens in all the instances except the one at the very bottom of the page, where the text is in the vertical centre. I have used a styled link, rather than a button as I read somewhere that buttons shouldn't be used to link to other pages but i'm not sure if this is correct. Most buttons look like this: Button at the bottom of page looks like this: And here is my code: .signup{ -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; transition: all 200ms ease-in-out; padding: 15px 25px; font-size: 20px; text-align: center; cursor: pointer; tex-decoration:none !important; outline: none !important; color: white !important; background-color: #c4e5c0; border: none; border-radius: 25px; box-shadow: 0 2px #999; max-width:max-content; position:relative; left:50% ; } a:link{ text-decoration:none !important } .signup:after{ content:"Sign Up"; } .signup:hover{ -webkit-transition: all 600ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; transition: all 600ms ease-in-out; box-shadow: 0 4px #999;color:#7c7c7b !important; color:#7c7c7b; } .signup:active { color: #7c7c7b; box-shadow: 0 4px #999; transform: translateY(4px); } </style> <a class="signup" href="https://secure.squarespace.com/checkout?cartToken=cCgtbiu3iuL1bhb92cLZ5lfk-RahxlBtwd5QeSw9&websiteId=58762023893fc0d94810ba05"></a> Many thanks in advance!

Thanks, @tuanphan and @bangank36, it does seem to work now. I'm not sure why the image was resizing for me before. I cleared my browser cache and restarted the laptop and it works now. The only thing is that the image aligns to the top of the container (see the screenshot). Is there any way that I can vertically align it to the centre?

Thanks for your answer, @bangank36. It kind of works, but when the screen width gets smaller, the image becomes tiny. I'm attaching a screenshot:

Sorry, should be: https://tracytredoux.com/code-test

Site URL: http://https%3Atracytredoux.com/code-test Hi, I'm trying to create a series of coloured blocks that contain an icon, a title and some text. This is the closest I have been able to get and as you can see from the code below, it's a bit messy. I have had to position the icon and the text manually, and the icon does not stay vertically centred as the screen is resized. If anyone has a suggestion how I could code this more effectively I would be very grateful. <style> .heading{ font-size:1.2em; } .text{ margin-left:60px} .imageplace{ position:absolute; top:30px } .green{ background-color:#c4e5c0; padding:20px 40px 20px 40px; border-radius:0px 20px 0px 20px; max-width: max-content; text-align:center; } </style> <div class="green"> <div class="imageplace"><img src="https://images.squarespace-cdn.com/content/v1/58762023893fc0d94810ba05/1663759321108-63ZII831I0JURY7W4V9T/guide.png?format=500w" alt="Cinque Terre" width="60" height="60"></div><div class="text"><span class="heading">At a Glance</span> – this is your daily protocol for phases 2 and 3 of the program, recipes included and some more test text to see how it resizes as i change the size of the viewport.</div> </div><br>

Perfect, thank you so much!

Hi @bangank36, thanks for your suggestion. Yes, I've seen the button option and it's a last resort but I would really like to make the entire section clickable as I think it would improve the usability and save on screen real estate on mobiles.

Site URL: https://bettertotalk.com/sandbox Hi all, I'm working with a section that is taken from the 'services' templates in fluid mode. I'd like to make each of these 3 sections hyperlinks but there isn't any built in option to do so (other than adding a button). I have been able to tweak the text formatting using the section ID, but I can't find an ID to target the individual list elements and I'm not sure what the actual syntax should be for creating a hyperlink. Any suggestions appreciated!

Thank you!

Thanks @tuanphan, this does change the font size, but it is applying it to the entire footer. I am trying to change only the 'better to talk' text, which is block id: #block-5457f48e1c64898f4c01 Also, is there any particular reason why this should be in custom CSS, rather than embedded in a code block in the footer itself? Thanks!

Site URL: https://bettertotalk.com Hi, I'm trying to change some text size in my footer in mobile view only. For some reason none of the font-size commands seem to have an effect. Code is below (the second part) and is located in a code block within the footer itself. I added in the background-color bit just to be sure that I am referencing the correct block and it works fine so it's just the font size that has no effect. Thanks in advance! <style> @media only screen and (min-width: 601px){ #block-yui_3_17_2_1_1661168201465_60548{ position:relative; top:-6px } } @media only screen and (max-width: 600px){ #block-5457f48e1c64898f4c01{ font-size: 50% !important; background-color:red } { </style>

I have been having the same issue and have resorted to using 'classic' sections for much of my site as everything seems to fall apart in fluid as soon as the screen gets to a certain size. Seems like they have released fluid way too early before it is really working.

Thanks @paul2009, this is exactly what I needed!

Site URL: https://bettertotalk.com Hi, I'm trying to find a better way of aligning the text in my footer so that the opening times are aligned. I think that TAB should work but in Squarespace pressing that key cycles around blocks. I have used the space key in the image below but obviously they aren't quite lined up. I also tried to use 2 different text blocks, but as you can see in the 2nd screenshot, they start to overlap when on a smaller screen. Is there a way to implement this? Thanks in advance!

Thanks, @tuanphan! This works great. Do you have any suggestions about why the button colour changes in mobile view? I have tried setting the backround.color attribute but it does this:

Sorry, @christyprice, I just realised that I didn't reply to thank you. Your suggestion worked! Thank you!

Also, for some reason the button changes colour in the mobile view, from yellow to blue. Is there any way to prevent this happening? Thanks!

Site URL: https://bettertotalk.com Hi, I would like to move the 'contact' button on my header menu, in mobile view. As you can see in the screenshot, it is was down at the bottom and obscured by the 'email' button. If possible, I would like it to be right under Ts & Cs. Any help is greatly appreciated!

@paul2009 Thanks for the workaround, it has saved me for the time being! But it seems crazy that they haven't addressed this before rolling out the update. I really hope they are sorting it as a priority.

Hi all, I would like to be able to change the link colour for a whole page. At the moment, I have a workaround by defining a .colorchange class and then using 'span class="colorchange"' within each link. But it would be great if I could just define the link colours in the page's style header. I have tried a few variations around: <style> p a{ color:#c10000 } </style> This doesn't seem to have any effect so I'm wondering if my syntax is wrong, or if it just isn't possible? Thanks in advance.

Ah yes, I understand it now and it's working for me. Thanks a lot!