Hero Letter Size On Mobile below 300px

This topic is: Resolved

This is a PRIVATE forum for verified users only, to view the replies/answers, you must be logged in!

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Erick 1 year, 9 months ago.

  • Author
    Posts
  • #7302

    Erick
    Member
    Post count: 1018

    2 things regarding hero on smaller screens

    1. I wondering how to reduce the size of the letters in the hero banner for small screens below 310px.

    I tried using this codes but it kept affecting all the other sizes.

    @media (min-width: 310px) {
    	.site-hero .hero-brick .entry-header {
    		margin-bottom: 10px !important;
    	}
    }

    I tried it without the important as well

    and tried this code also but no good

    @media (min-width: 310px) {
    	.site-hero .hero-brick .entry-header {
    		margin-bottom: 10px !important;
    	}
    }
    
    html .site-hero .hero-brick .entry-header {
    		margin-bottom: 30px !important;
    	}

    2. How to reduce margin, I noticed some of the tags and if the text is too long it jump out of the post, and this can be solved if the letter margin bottom can be reduce.

    I tried this code but no go

    @media (min-width: 310px)
            .site-hero .hero-brick .entry-header {
    		margin-bottom: 10px;
    	}

    thank you

    • This topic was modified 1 year, 9 months ago by  Erick.
    • This topic was modified 1 year, 9 months ago by  Erick.
  • #7357

    Max
    Staff
    Post count: 3150

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #7394

    Erick
    Member
    Post count: 1018

    Thanks Maxxi! Worked like a charm. I realized now that every single thing I was doing was affecting everything from 300px and up, but once you use Max-with is the opposite 🙂

You must be logged in to reply to this topic.

This is a PRIVATE forum for verified users only, to view the replies/answers, you must be logged in!