RSVPify event websites are responsive by default - meaning the layout and sizing of your content automatically adjust across screen sizes (desktop, tablet, and mobile). This is essential to ensure your event website looks great on any device.
Many common questions - "Why is my image cropping on mobile?" or "Why does my background image look stretched or distorted?" - are answered by understanding how responsive design behaves, how the block settings below control image display, and by choosing images that can adapt to different screen shapes.
Testing your responsive layout
The most accurate way to preview your website is on a real phone or tablet - this allows you to see both portrait and landscape views.
For a quick check during editing, you can also use the device preview inside the builder.
General image recommendations
Supported formats - PNG, APNG, SVG, JPEG, HEIC
Maximum upload size - 20 MB (hard limit)
Recommended max for performance - ≤ 500 KB
💡 Tip: Keeping images under 500 KB improves page load speed - especially for guests on mobile data.
Image Block settings
The Image Block gives you the most direct control over how a single image displays:
Image type - choose how the image is sized and positioned on the page: Full screen image, Large image, Medium image, Right aligned image, or Left aligned image. Use full screen or large for hero-style visuals, and left/right aligned when the image sits beside text.
Fill image vs. Fit image - hover over the uploaded image to choose Fit (shows the full image but may leave margins) or Fill (fills the space but may crop edges). This is the setting to check first if an image looks cropped or is leaving unwanted whitespace.
Alt text - add a short description of the image for accessibility and SEO. Every image block should have this filled in.
Background container - choose No container to let the image sit directly on the page, or Color to add a solid background behind it.
💡 Tip: If a photo looks off on mobile even after choosing Fit or Fill, try switching the Image type as well - a Full screen image and a Medium image crop very differently on a narrow screen.
Card Layout block settings
The Card Layout block displays multiple images with titles and descriptions side by side - useful for highlighting event features, team members, or program tracks.
Alignment - choose how text and images are positioned within each card.
Images style - choose how card images are cropped and arranged, including grid-style square crops or circular cropped images.
Add card - add additional cards to the layout, each with its own title, description, and image.
Here is an example of the Card layout can look like when it's fully customized:
💡 Tip: Circular image crops (available under Images style) work best with headshots or centered subjects - a landscape photo with important detail near the edges will lose that detail when cropped to a circle.
Image guidelines by type
Background images
Website block backgrounds
Recommended width: 1600–2000 px wide
Recommended height: at least 2× the minimum block height (~870 px) for good clarity. Exact height will vary depending on the block's content and layout.
Minimum recommended: 1200 × 788 px
Email backgrounds
Email body width is 574 px
For retina/sharp rendering, upload at 2× width: ~1150 px wide
Height is flexible based on design
Keep file size ≤ 300 KB for faster load and better deliverability
Tips:
Add an overlay color so text stays readable over photos (website/form only).
Ensure the most important content is centered on the image so it displays well on both mobile and desktop.
Logos
Use a transparent background (PNG or SVG is best).
Horizontal or square ratios work best for navigation/header areas - tall or vertical logos may appear small or get cropped.
Speaker image recommendations
Aspect options you can choose for the block (all speakers will follow the same shape):
Square (1:1) - recommended: 800 × 800 px
Vertical (9:16) - recommended: 1080 × 1920 px
Horizontal (16:9) - recommended: 1600 × 900 px
Test before publishing
After uploading images and configuring block settings, preview your event website on both desktop and mobile - ideally on a real device - and confirm nothing is stretched, cropped unexpectedly, or loading slowly.
Need more help? Get support from our Community Forum.
Find answers and get help from the RSVPify Support team and our community.