best css for adjusting all heads and titles on site?

[mcheck]

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

[Mohammad – SUPPORT]

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

[mcheck]

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?

[mcheck]

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

[David Martin – Support]

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

[mcheck]

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

[Rui Guerreiro – SUPPORT]

Good work David.
-Rui

[David Martin – Support]

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

– David.