Table of Contents
Creating a responsive contact card grid is a common task in modern web design. Using CSS Flexbox, you can easily arrange multiple contact cards that adapt to different screen sizes. This guide will walk you through the process of building a flexible, responsive contact card grid using Gutenberg blocks.
Setting Up the Container
First, create a container that will hold all your contact cards. In Gutenberg, you can use a Group block for this purpose. Set the display to flex and enable wrapping to ensure the cards flow nicely on smaller screens.
Example CSS for the container:
display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
Designing the Contact Cards
Each contact card can be a separate block, such as a Group block with a fixed width and styling. Use border, padding, and shadow to make the cards stand out.
Example CSS for individual cards:
flex: 1 1 200px; max-width: 300px; border: 1px solid #ccc; padding: 15px; box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
Adding Contact Information
Inside each card, add text blocks for name, title, phone, email, and address. Use headings for names and labels for clarity.
Example structure:
John Doe
Title: Marketing Manager
Phone: (555) 123-4567
Email: [email protected]
Address: 123 Main St, City, Country
Making the Layout Responsive
The key to responsiveness is the flex container’s wrapping and the flexible width of the cards. You can add media queries in your CSS to adjust the gap, max-width, or layout direction on smaller screens.
For example, on mobile devices, you might want the cards to take full width. Use CSS like:
@media (max-width: 600px) { .contact-grid { flex-direction: column; } }
Conclusion
Using Flexbox within Gutenberg blocks allows you to create a clean, responsive contact card grid. Customize the styling and layout further to match your website’s design. This approach ensures your contact information is accessible and visually appealing across all devices.