0
Welcome Guest! Login
0 items Join Now

RokSprocket Mosaic Text Responsive?

Last Post
Search Topic
    • jshort's Avatar
    • jshort
    • Hero Rocketeer
    • Posts: 257
    • Thanks: 1

    RokSprocket Mosaic Text Responsive?

    Posted 11 years 4 weeks ago
    • Is there any way to make the Title text responsive, so the text gets smaller instead of wrapping to a new line?
    • Last Edit: 11 years 4 weeks ago by jshort.
    #1083678
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22281
    • Thanks: 3225
    • messin' with stuff

    Re: RokSprocket Mosaic Text Responsive?

    Posted 11 years 4 weeks ago
    • sure, target the font-size with css and create classes at the respective media query breakpoints to scale down font-size by em.

      www.rockettheme.com/blog/team/57-respons...gn-rockettheme-part2
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1083720
    • jshort's Avatar
    • jshort
    • Hero Rocketeer
    • Posts: 257
    • Thanks: 1

    Re: RokSprocket Mosaic Text Responsive?

    Posted 11 years 4 weeks ago
    • OK, so how do I code that? I'm trying to learn how to do this.

      I have this code:
      .sprocket-mosaic-title a {
    line-height: 1.2em;
}

      And:
      {codecitation class="brush:css"}
/* Smartphones */
@media (max-width: 480px) { ... }

/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) { ... }

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { ... }

/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { ... }

/* Large Display */
@media (min-width: 1200px) { ... }
{/codecitation}
    #1083905
    • jshort's Avatar
    • jshort
    • Hero Rocketeer
    • Posts: 257
    • Thanks: 1

    Re: RokSprocket Mosaic Text Responsive?

    Posted 11 years 4 weeks ago
    • This is what I have so far:

      {mosaictitle class="brush:css"}
/* Smartphones */
@media (max-width: 480px) { .sprocket-mosaic-title a {
    line-height: 0.6em;
} }

/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) { .sprocket-mosaic-title a {
    line-height: 0.8em;
} }

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { .sprocket-mosaic-title a {
    line-height: 1.0em;
} }

/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { .sprocket-mosaic-title a {
    line-height: 1.2em;
} }

/* Large Display */
@media (min-width: 1200px) { .sprocket-mosaic-title a {
    line-height: 1.2em;
} }
{/mosaictitle}
    #1083908
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22281
    • Thanks: 3225
    • messin' with stuff

    Re: RokSprocket Mosaic Text Responsive?

    Posted 11 years 4 weeks ago
    • It's not likely the line-height attribute that's setting the font size... it'd most likely be "font-size: 20px;" or something like that...

      So assumming you've found the right piece of code to override you'd end up with some media queries with nested css that looks like this:

      @media (max-width: 480px) {     
    .sprocket-mosaic-title a {
    font-size: 16px;
    }
}
 
/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) { 
    .sprocket-mosaic-title a {
    font-size: 18px;
    }
}
 
/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { 
    .sprocket-mosaic-title a {
    font-size: 20px;
    }
}
 
/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { 
    .sprocket-mosaic-title a {
    font-size: 22px;
    }
}
 
/* Large Display */
@media (min-width: 1200px) {     
    .sprocket-mosaic-title a {
    font-size: 24px;
    }
}
      //line breaks and tabs aren't needed... you could have each on a single line if you wanted, so long as the {} are paired correctly

      That's purely an example. You most likely won't need to scale it that drastically, or at every breakpoint. In some instances you may even scale back up (like if you have a sidebar fall off and suddenly actually have more width to work with ~ common in a lot of design for tablets).

      You may choose to leave the default size and just scale by font-size: NN%; at certain break points.

      I typically test by dragging my browser's edge around and them I use Chrome Developer tools to emulate an iphone 5 once it gets down to mobile view size since 480px is actually kinda wide for a mobile, and it helps to change your browsers user agent to "mobile" to make sure you're viewing everything as it's been designed to be served to a mobile.
    • Last Edit: 11 years 4 weeks ago by Matt.

    • The following users have thanked you: jshort

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1083910
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22281
    • Thanks: 3225
    • messin' with stuff

    Re: RokSprocket Mosaic Text Responsive?

    Posted 11 years 4 weeks ago
    • was posting at the same time as you... what you wrote looks functional... test test test!!! :)
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1083911
    • jshort's Avatar
    • jshort
    • Hero Rocketeer
    • Posts: 257
    • Thanks: 1

    Re: RokSprocket Mosaic Text Responsive?

    Posted 11 years 4 weeks ago
    • It worked perfect. I learned a lot. Thanks. :)
    • Last Edit: 11 years 4 weeks ago by jshort.
    #1083916

Time to create page: 0.078 seconds