hilaryb Posted August 27, 2021 Share Posted August 27, 2021 Site URL: http://hilarybeckwith.com/main-page Hello - I have been trying various ways of manipulating CSS/trying different types of blocks to get the look and functionality of the website in the attached screenshot. Can anyone help walk me through it? I've tried a simple List, as well as three separate image blocks installed adjacent to one another. I don't necessarily need/want the number system, although it would be cool to know how to do that, too. In the end, I'd like an outlined box with an image, text ON the image, descriptive text BELOW the image, and a BUTTON below that. I've looked at videos and have read articles, and I feel like I'm getting close, but don't know enough about this to quite get it right. Please help?? Link to comment
tuanphan Posted August 30, 2021 Share Posted August 30, 2021 Hi, 1. Add 3 Image Blocks add image add title add subtitle add links in subtitle (then we will give the code to turn link to button) 2. Share link to page where you added 3 image blocks. We will give the code to add outline around 3 boxes add 3 numbers add 3 text over images move button overlap outline Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hilaryb Posted August 30, 2021 Author Share Posted August 30, 2021 Hello! I installed the images. I wasn't sure how to add "title" and "subtitle" but I formatted them as Stacks and typed the title that i want aligned inside each image, and then the link, then the description below that, but I also want there to be a sort of title below the image as well. We'll cross that bridge when we get to it. Thanks for your help! The page where I did this is http://hilarybeckwith.com/main-page Link to comment
tuanphan Posted August 31, 2021 Share Posted August 31, 2021 23 hours ago, hilaryb said: Hello! I installed the images. I wasn't sure how to add "title" and "subtitle" but I formatted them as Stacks and typed the title that i want aligned inside each image, and then the link, then the description below that, but I also want there to be a sort of title below the image as well. We'll cross that bridge when we get to it. Thanks for your help! The page where I did this is http://hilarybeckwith.com/main-page Hi, I see no text in image button. Can you add a text? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hilaryb Posted August 31, 2021 Author Share Posted August 31, 2021 14 minutes ago, tuanphan said: Hi, I see no text in image button. Can you add a text? All set Link to comment
hilaryb Posted August 31, 2021 Author Share Posted August 31, 2021 I added the text to the buttons. Can you also please help me with the single image block below the quote (same page)? I have it set to Overlay, but the body text has such a small space. I'd like it to be wider without changing the size of the image. Is there a way to do that? Link to comment
hilaryb Posted August 31, 2021 Author Share Posted August 31, 2021 @tuanphan Hi Tuanphan - I was just wondering if there's a chance I could get a response soon? I've been working on it all day and cannot seem to find a solution, although as you can see I've made some progress. Please help! I appreciate your time! Link to comment
tuanphan Posted September 1, 2021 Share Posted September 1, 2021 15 hours ago, hilaryb said: @tuanphan Hi Tuanphan - I was just wondering if there's a chance I could get a response soon? I've been working on it all day and cannot seem to find a solution, although as you can see I've made some progress. Please help! I appreciate your time! I sent code for text over image in your another post With border, button over border, use this code /* List Section */ [data-section-id="612ee2e62200bd4633622d9b"] { li.list-item { border: 2px solid white; position: relative; } .list-item-content__button-wrapper { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; z-index: 9999; bottom: -20px; } .list-item-content__button-container { margin-top: 0 !important; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hilaryb Posted September 1, 2021 Author Share Posted September 1, 2021 this applied the effect to the List I put in place of the images (because I have been trying to figure this out for days, and needed something rather than nothing). You instructed me to install images and said that you would provide codes for different elements, but that's not what you did. We discussed something entirely different, and I have been scouring codes and trying to get things to work on my own for days now, and am tired of the fight. This has been a total waste of time. I give up. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.