Responsive Mobile Event Promotion Pages: Full‑Screen Layouts, Background‑Size Tricks & Animation Tips

Generally, activity promotion pages are full‑screen slides, but the fragmented viewports of mobile devices make consistent display across phones challenging. This article tackles each difficulty to form a universal solution.

Event Promotion Page Analysis

Using the first screen of the IMWeb conference as an example:

Layout analysis of the elements:

A full‑screen background image

"Past Review" positioned top‑left, IMWeb.io text and upward arrow centered at the bottom

A glowing earth stretched horizontally, positioned at the bottom vertically

Other middle content centered

All content displayed on a single screen regardless of phone dimensions

Elements also have animation effects, often using the animate.css library. The following sections address each technical challenge.

Full‑Screen Background Image Solution

The first thought is background-size, with possible values 100%, contain, and cover.

According to caniuse compatibility reports, two points are noteworthy for Android 4.3‑:

It does not support the shorthand background-size inside background, so the style must be declared separately.

It does not support percentage units for background-size, leaving only contain and cover as viable options.

The difference between contain and cover is that contain scales the image to fit both width and height, often leaving empty space unless the image ratio matches the viewport. cover scales until one dimension fills the viewport, cropping the excess in the other dimension. The conclusion is to use cover.

Knowing the typical mobile viewport aspect ratio is essential; most phones use a 9:16 ratio (0.5625), with smaller devices at 320×480 (0.666). Therefore, designing background images with a 9:16 ratio yields the best results. When using top positioning, avoid placing important visuals at the bottom, and with center positioning, avoid important visuals at both top and bottom due to possible cropping.

Glowing Earth Horizontal Fill

This issue is solved by using the image’s aspect‑ratio method, as described in earlier articles such as “How to Scale Containers by Ratio in CSS” and “Mobile Refactoring Series 6 – Icons and Images”. The core idea is to use a percentage‑based padding, which is calculated from the element’s width, while setting the actual height to 0. The SCSS mixin below implements this:

// object wrap
// $child parameter should use single quotes because it targets child selectors
@mixin object-wrap($percent: 100%, $child: 'img') {
    position: relative;
    padding-top: $percent;
    height: 0;

    #{unquote($child)} {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Other Middle Content

Wrap all middle elements in a container and vertically center that container, which avoids positioning each element individually and reduces reliance on transform for animations.

Two scenarios are considered:

Fixed‑Width Content

Place all elements inside a container and center it vertically while spanning the full width. The container’s child elements are then positioned relative to it. Example CSS:

.center-wrap{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
}

For logos, conference name, and time, you can use flexbox for horizontal centering or set explicit widths with auto margins. Since the layout does not use transform, animate.css can be safely applied for animations.

Variable‑Width Content

If element widths vary, you can:

Use media queries to set a fixed width within a certain range.

Calculate the element’s width as a percentage of the viewport width; images will scale automatically, and for background images you can apply the same container‑ratio technique with background-size: cover.

It is recommended to keep the main content within 320 px for easier handling. The one‑screen display requirement is generally satisfied after applying the above methods; any remaining edge cases can be addressed with additional media queries.

Other Special Cases

The universal solution does not cover every scenario; some special cases need separate consideration.

Elements Positioned with Transform – How to Animate

animate.css relies on transform animations, which conflict with layout positioning that also uses transform. The recommendation is to avoid using transform for layout positioning altogether. If you must use it, manually add the same transform values to each keyframe in your custom animation.

Viewport Height Percentages

The CSS vh unit represents viewport height but is unsupported on Android 4.3‑. A workaround uses rem: set the root font‑size to one‑tenth of the viewport height via JavaScript, making 1rem equal to 10 % of the viewport height.

document.addEventListener("DOMContentLoaded", function(event) {
    document.documentElement.style.fontSize = window.innerHeight/10 + "px";
});

Summary

Designing mobile event promotion pages boils down to solving these problems:

Full‑screen layout

Element positioning

Positioning combined with animation

Handling variable dimensions

Special‑case adjustments

Addressing each ensures that such pages are no longer problematic.