ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• September 15, 2015 at 4:19 pm #213231
  mcheck

  Member

  Post count: 44

  I have searched for this in the forums, but have found bits and pieces.
  It seems that there might be a definitive reference/resource of a snippet of css that we could add to child theme css to adjust the font sizes on different devices (using media queries, I assume).

  From what I can tell, there is no responsive size adjustment that happens per device currently built into the theme (please correct/direct me if I’m wrong), and we need to adjust on our own.

  For instance, on blog/post titles, the h1, .impact-text, .impact-text-large does not change font size going from Desktop to Mobile, and I would like it to shrink by x%.

  Do you have a css code snip that you share to allow css resizing by device this way? Or is there a setting in the system I am missing?

  Thanks! Mike

  September 16, 2015 at 8:03 am #213396
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  It should not have text responsive issues. Please provide me specific page url to check this issue.
  Thanks
  Mohammad

  September 16, 2015 at 3:26 pm #213688
  mcheck

  Member

  Post count: 44

  Any of the blog/post articles as I posted above.

  As I put above, here is the Title on desktop:

  
  .page-heading h1, .page-heading h3 {
      color: #222222;
  }
  local.bamstudios.com/media="all"
  .page-heading h1 {
      margin-top: 0;
      margin-bottom: 0;
      white-space: normal;
  }
  h1, .impact-text, .impact-text-large {
      font-family: Lato,Arial, Helvetica, sans-serif;
      line-height: 58px;
      font-weight: 700;
      font-style: normal;
      font-size: 54px;
  

  ANd here is the Title on an iPhone5s, same font-size, line-height, etc.:

  
  .page-heading h1, .page-heading h3 {
      color: #222222;
  }
  local.bamstudios.com/media="screen"
  @media only screen and (max-width: 767px)
  .page-heading h1 {
      word-wrap: normal;
      white-space: normal;
  }
  local.bamstudios.com/media="all"
  .page-heading h1 {
      margin-top: 0;
      margin-bottom: 0;
      white-space: normal;
  }
  h1, .impact-text, .impact-text-large {
      font-family: Lato,Arial, Helvetica, sans-serif;
      line-height: 58px;
      font-weight: 700;
      font-style: normal;
      font-size: 54px;
  

  The only difference that I can see is in loading responsive.css but there is no sizing changes.

  Should there be?

  September 16, 2015 at 3:55 pm #213709
  mcheck

  Member

  Post count: 44

  And, many of the titles will break in mid-word because they are so large.

  Viewing many of the pages on mobile screens displays broken text like this:

  FILM, TV &
  DOCUMENTA
  RY

  September 16, 2015 at 5:48 pm #213787
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Here are some specific page CSS classes for your site that you can add to your theme options custom CSS to alter the sizing. You should add these into a media query to change the font size for different screen sizes, I have also provided you with some media queries to help you further.

  Masonry Blog Title:

  .masonry-items .blog-item .details-wrap h2 {
      font-size: 21px;
      line-height: 34px;
      margin: 0 0 20px;
  }

  Single Post Pagination Titles:

  .post-pagination-wrap h2 {
      font-size: 21px;
  }

  Single Post => Recent Posts:

  .recent-post .details-wrap > h3 {
      font-size: 21px;
  }

  Generic Page Hero Text:

  .bam-page-head {
      font-size: 38px;
  }

  Useful Media Queries:

  /* ----------- iPad 3 and 4 ----------- */
  /* Portrait and Landscape */
  @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) {
      .your-css { color: red; }
  }
  
  /* ----------- iPad mini ----------- */
  /* Portrait and Landscape */
  @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) {
      .your-css { color: red; }
  }
  
  /* ----------- iPhone 4 and 4S ----------- */
  /* Portrait and Landscape */
  @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2) {
      .your-css { color: red; }
  }
  
  /* ----------- iPhone 5 and 5S ----------- */
  /* Portrait and Landscape */
  @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2) {
      .your-css { color: red; }
  }
  
  /* ----------- iPhone 6 ----------- */
  /* Portrait and Landscape */
  @media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
      .your-css { color: red; }
  }

  If you would like help for a certain text, please post a page link and screenshot to that element.

  Thanks,
  David

  September 16, 2015 at 5:56 pm #213798
  mcheck

  Member

  Post count: 44

  Fantastic, thank you David. I will try these with the queries I already have installed.

  September 16, 2015 at 6:03 pm #213806
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Good work David.
  -Rui

  September 16, 2015 at 6:03 pm #213807
  David Martin – Support

  Moderator

  Post count: 20834

  No problem, let us know what else you need and we can help you out.

  – David.

• Back to forum

  Posted in: Cardinal