CPharmacyScot Posted April 6 Share Posted April 6 Hi, I hope someone can help. I have created a row flip cards acting as an about us section with the front being an image and the back telling us a little bit about the person and it hosts the social icons and contact details etc. The trouble I seem to be having is when I get to different screen sizes it all goes a bit wonky until we get to mobile view. I have some knowledge in html and CSS but really struggle with understanding how to make it responsive so that it works on all screen sizes. I wonder if someone would be able to help find the solution to it. The scree sizes that this works is: 2560 x 1440 1920 x 1080 1680 x 1050 I start running into trouble from screen width 1440 till about 768... here is the link:https://www.cps.scot/home-test Password: cps-test-2023 Thank you in advance. Link to comment
Solution Ziggy Posted April 6 Solution Share Posted April 6 Instead of placing each card in a separate code block, could you place each within a single code block set up as a flex grid? That way you can control the way that they stack on different screen sizes and you should still be able to get the offset look with nth-child(even) and a margin-top value. CPharmacyScot and tuanphan 1 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
CPharmacyScot Posted April 6 Author Share Posted April 6 Thank you very much... I learnt something new today. Link to comment
Ziggy Posted April 6 Share Posted April 6 Looks great! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? 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