Carrd Tutorial: Making Your Carrd Site Responsive

Thumbnail image for "Tutorials" article

Table of contents

In today’s digital world, it’s important to make sure your website looks and works well on all devices. Responsiveness is key to creating a seamless user experience, whether your visitors are viewing your site on a desktop, tablet, or smartphone. Carrd makes it easy to create responsive websites that automatically adapt to different screen sizes and orientations.

Tweaking the header

Here we will show you how to change the header to a more mobile friendly one.

Steps:

1) Duplicate the header:

Image: Click on the header
Image: Duplicate the header

2) Change the visibility of both headers: One for desktop and the other for mobile.

Image: Change the visibility of both headers
Image: Visibility desktop only
Image: Visibility mobile only

We will now make a new section that will serve as a mobile dropdown.

3) Duplicate an existing “Section break”: If you want to learn more about section breaks and and scroll points take a look at our guide.

Image: Click on an existing section break
Image: Duplicate the section break
Image: Drag the section break

4) Change the name and drag the header buttons from the top to here:

Image: Change the name
Imag: Drag the header buttons from the top to here

5) Add an Icon: This will serve as an exit from the dropdown.

Image: Add an icon
Image: Click on cancel (light) icon
Image: Align the icon to the center
  1. Change the URL: Changing it to”#” will act as a homepage button.
Image: Change the URL to #

We will also add an icon to the mobile header that will serve as the dropdown button.

Image: Click on the menu icon

Drag it to the desired position and change the URL to “#mob-nav” or the name you have chosen.

Image: Change the URL

You can see how your page will look if you click on the “mobile’ icon from the menu.

Image: Click on the mobile Icon

Alternatively if you like coding you can use something like this:

Image: Header made from embeded codes

And the final result should look like this:

Image: Final result

This video will guide you through the steps to optimize your site for mobile, tablet, and desktop views.

Conclusion

Making sure your Carrd site is responsive and providing a consistent and user-friendly experience across all devices is important. A responsive design not only enhances the beauty of your website but also increases accessibility and efficiency, helping to engage visitors and reduce bounce rates.

Best of luck with your responsive site!