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>