🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Change the font on mobile for hero-tittle class

Home Forums Support Change the font on mobile for hero-tittle class

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1133165
    andriansah

    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

    #1133272
    Leo
    Staff
    Customer Support

    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/

    #1133593
    andriansah

    Hi Leo

    Thank you it works now

    My website is nice in mobile and desktop

    #1133618
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.