Total-CMS Impact slide: container and font size

[Adri12 (Adriano)]

Hello everybody and happy new year

I Need you help for this one.

In my blog the impact stack at the top of the page as well as on each of the article’s pages is showing well.
The issue is when a see the page on a mobile screen mode: this is how it shows.

As you can see the title and the intro is not showing properly.

I have been trying to play around with the stacks’ settings with no success

1. I tried to decrease the font size for mobile, but it looks like the 1rem is the minimum
2. I tried to click the “Thumb on Mobile?” setting, but nothing changed on mobile settings. Although I haven’t published it, so maybe it is a requirement to see the change
3. I played with the container size settings, but without achieving the goal of fitting the entire text and title on the mobile’s picture.
4. I did manage to fit the text almost entirely on mobile, but it showed so small on dekstop and tablet screens.

What do you suggest?
Any idea on how to fix this would be highly appreciated.

[joeworkman]

Sorry that I missed this one. Looks like there are a lot of broken images. I hope that @ben can help fix this… it will make it easier for me to understand the issue.

[ben]

I will look and see if we can fix these images.

@Adri12 it might be quicker if you could reupload them if possible?

[Adri12 (Adriano)]

Hello Ben and Joe!

I just re-uploaded the images. They look fine now.

Thanks for your assistance guys !

[joeworkman]

There are a few ways to fix this… any combination of these

• In Site Styles, you can set the H3 font sizing to be smaller on mobile.
• Try different sizing options in Impact, probably Flexible Height.
• Use the Min Height setting in Impact to make sure that its always at least a certain height.

[Adri12 (Adriano)]

Hi Joe,

Thanks for your help.

I have tried your options:

@joeworkman

In Site Styles, you can set the H3 font sizing to be smaller on mobile.

This is before I set up the H3 font sizing smaller

And this is after (I set it up at 0.9 rem)

What changed is the Blog Title OUTSIDE the Impact Stack.

@joeworkman

Try different sizing options in Impact, probably Flexible Height.

In Flexible Height almost sorted the issue out, but still it didn’t entirely. Please have a look at the screenshots below:

• By using Flexible Height, I have managed to fix this. I had to set to min. height: 850px!

Although in my opinion on deckstop now, the impact slide may be a little bit over the edge in terms of size! The picture is literally… massive . I published the changes anyway because better massive than regular, but not visible on mobile: have a look at it, what do you think?.

@joeworkman

Use the Min Height setting in Impact to make sure that its always at least a certain height.

See previous… I set minim height at 850px… I think I could have had the best of both worlds if the flexible height setting could have been set to 150% or so.

Do you think we could optimise this aesthetic issue somehow?

Thank you so much anyway. At least now, it is all readable.

[Adri12 (Adriano)]

This is the blog link: https://www.healingdietcoach.com/blog/

It would look much better if we can find a solution on how to reduce the font sizes inside the container instead of enlarging so much the impact banner…

[swilliam (scott williams)]

one solution would be to use a BWD header pro stack for the overlay content. it will allow you to set size at responsive break points

[Adri12 (Adriano)]

Hi Scott,

Thanks for the advice!.

I am not sure though that it would be easy to configure this BWD’s stack with a Total-CMS blog.

[swilliam (scott williams)]

Ah, sorry I didn’t catch that part. SO the custom font size setting isn’t working in the foreground content when it’s set to Hipwig as the content type?
I’ll try to test later today as well.

[swilliam (scott williams)]

I did a quick test…

I had to set the content to: Paragraph to get it to scale.

Maybe that will give Joe some clues

[joeworkman]

It looks like you setup some custom CSS in the site wide code that is overriding the Site Styles sizing for that h3 tag.

[Adri12 (Adriano)]

I have deleted the .slide-content h3 CSS and have reduced the H3 sizing afterwards.

It does reduce the sizing of the text outside the Impact Banner, but not inside the Impact Stack.

Indeed I tried to reduce all of the H’s sizing on mobile and this is the result:

• The text size inside the Impact Stack remain the same

SAME TEXT SIZE INSIDE THE IMPACT

… But

• The rest of the text in the page is reduced in size

This means that the “H sizing” is then not culprit, right?

When I inspect the page on the internet this is what shows:

Also I tried to adjust the rem sizing inside the stack settings and this is where it gets interesting…

• When I click on the font sizing inside the Stack settings: 1.00rem shows up on both devices. And voilà the text is now showing in full on a mobile device (not the Iphone SE though…still not fitting entirely)!.
  
  

Now this would be good enough for me on mobile, but obviously on deckstop doesn’t look great, as the text is now too small

When I set the +Tablet rem sizing at 3 or even 6, nothing changes. It looks like the mobile size overrides the Tablet sizing.

What could I do next?. Why is the tablet sizing inside the Stack settings not working?. I am sure we will sort this out soon!. The “dragon” is getting tired and we are keeping strong

Thanks as always for the support.