Carlieann Posted April 8, 2022 Share Posted April 8, 2022 (edited) Site URL: https://saxophone-calliope-f29a.squarespace.com/ Hello, To better my skills, I'm re-creating a website that I love and I think has some great design. There are several things I'm still working on but I specifically need help with the product summary block. I would like to add a background image to each product card. A photo of exactly what I would like to achieve is below. I would also love to move the copy from below the image to above it, again to mimic the screenshot below. If you have any idea what code to use for this I would greatly appreciate it! Here is the link to my site: https://saxophone-calliope-f29a.squarespace.com/ The password to access my site is: brineintopedro Here is the original site I am using as a reference: https://ujjo.com/ Edited April 8, 2022 by Carlieann Link to comment
Solution tuanphan Posted April 10, 2022 Solution Share Posted April 10, 2022 Try adding to Design > Custom CSS div#block-yui_3_17_2_1_1648922134937_19653 .summary-item { background-image: url(https://cdn.shopify.com/s/files/1/0568/4694/2380/t/1/assets/product-item-background.svg?v=1146526704590749047); background-size: cover; background-repeat: no-repeat; background-position: top center; } Carlieann 1 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
Carlieann Posted April 14, 2022 Author Share Posted April 14, 2022 Thanks! I was able to implement this and the image now shows up. I was also able to re-order the content as I wanted, but now everything is looking compact and I'm having trouble getting it to size correctly. Anyone have any ideas there? Link to comment
tuanphan Posted April 18, 2022 Share Posted April 18, 2022 On 4/14/2022 at 7:11 AM, Carlieann said: Thanks! I was able to implement this and the image now shows up. I was also able to re-order the content as I wanted, but now everything is looking compact and I'm having trouble getting it to size correctly. Anyone have any ideas there? Hi, You mean resize bold text size??? 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
Carlieann Posted April 20, 2022 Author Share Posted April 20, 2022 Actually, I mean each card! I changed the display type to flex in order to change the positioning of the meta data and title of each summary card to be above the image (instead of below) but that also changed the size of each summary item. Attaching a screenshot of what it currently looks like. Link to comment
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 On 4/21/2022 at 5:52 AM, Carlieann said: Actually, I mean each card! I changed the display type to flex in order to change the positioning of the meta data and title of each summary card to be above the image (instead of below) but that also changed the size of each summary item. Attaching a screenshot of what it currently looks like. Yes. Flex will break summary layout. You can remove the code, then we will try some other code to move title/meta data position Carlieann 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment