Archived topic
Change the font on mobile for hero-tittle class
3 replies · Started by andriansah on January 15, 2020
Viewing posts 1–4 of 4
Hi
I manage to make text above slider with this code on element
<div class="background-slider">
[soliloquy id="1479"]
</div>
<div class="hero-title">
<p>
Welcome to <br>Top WEBSITE
</p>
</div>
And the css is
.inside-page-hero {
position: relative;
}
.hero-title {
position: absolute;
top: 35%;
left: 75%;
transform: translate3d(-40%,-40%,0);
font-size: 35px;
font-weight: bold;
}
On desktop the look is good, but on mobile device the hero-title is too big
How can I set the font size will look nice on mobile? still proportional
Hi there,
Try this CSS:
@media (max-width: 768px) {
.page-hero .hero-title p {
font-size: 10px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Hi Leo
Thank you it works now
My website is nice in mobile and desktop
No problem :)
This archived topic is closed to new replies.
