Responsive Title

  • Resolved mrosew

    (@mrosew)


    5 years, 10 months ago

    Hi Robin!

    I’m hoping you can help me with a responsiveness issue I’ve run into. I wanted to change the size of the overlay text, which you can see I’ve done below. Unfortunately, now the title isn’t responsive. I tried using this, but it looked really sloppy: font-size:5vw; I’m looking for nice bold font that scales down well on mobile.

    Do you have a solution for me?

    Thanks,

    Michelle

    /* Style Page Title Overlay
    ———————————————————— */

    .big-leader .entry-title.featured-image-overlay,
    .big-leader .archive-title.featured-image-overlay {
    font-size: 70px;
    font-family: ‘Open Sans Condensed’, sans-serif;
    text-transform: none;
    color: #00609c;
    text-align: center;

    /* Make these changes: */
    max-width: 1280px;
    padding: 10px 76px 10px;
    margin: 0 auto 30px;
    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    I might try something along the following lines instead. First, I would make some changes to the .wrap element around the title so that the title is always centered vertically, and then set the max-width on this element:

    
.big-leader .wrap {
    top: 0;
    max-width: 1280px;
    display: flex;
    align-items: center;
}

    Then you can modify the styling you’ve added with something like this:

    
.big-leader .entry-title.featured-image-overlay,
.big-leader .archive-title.featured-image-overlay {
    font-size: 70px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform: none;
    color: #00609c;
    text-align: center;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
   .big-leader .entry-title.featured-image-overlay,
   .big-leader .archive-title.featured-image-overlay {
        font-size: 36px;
   }
}

    The font size numbers can be whatever you like (and you can do vw or rem or px), but try tinkering with that and see if it helps.

    I’ve not tried it myself, but thought this CSS Tricks article was an interesting approach to responsive typography; it may be helpful to you.

    Hope that helps get you started–

    Thread Starter mrosew

    (@mrosew)

    That TOTALLY did the trick. Thank you so much!!!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive Title’ is closed to new replies.

Tags