Paralax image responsive?

1 reply · opened Mar 27, 2017

Ww4ll4ceMar 27, 2017

Hello,
i used this section code for my header image:

<section id="page-title" class="page-title-parallax page-title-dark page-title-right" style="padding: 250px 0; background-image: url('images/memorial_austin-1.jpg'); background-size: cover; background-position: center center;" data-stellar-background-ratio="0.2">
</section>

On mobile phones the text is not smaller and not quite readable. Is there a way to make this work?

regards

SSemicolon WebSTAFFApr 5, 2017

Hello,

We definitely understand your issue. Please consider using the following CSS Code to control the Font Sizes on Different Devices:

.device-sm #page-title.page-title-parallax h1 { font-size: 28px; }

.device-xs #page-title.page-title-parallax h1 { font-size: 24px; }

.device-xxs #page-title.page-title-parallax h1 { font-size: 22px; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard