I'm working on a new website that is using Nectar Slider for its headers.  I can change the tag of the header to H1 from within the Nectar Slider menu (instead of default).  I also found CSS to turn the bold off in H1 mode.

Unfortunately, the H1 formatting looks terrible and inconsistent when viewed on a mobile device (like a smartphone).  Problems include text that is much bigger than it should be, or using more space than is actually available (e.g. cropped text), etc.

I would be very happy if the H1 tag would behave the exact same way as it does in the "default" option mode - just with the H1 tag in use.

Is there fast CSS I can copy and paste to just duplicate the "default" header tag experience (probably H2) to the H1 tag for Nectar Slider headers?

Can you reshare the screenshot?  The link doesn't work.  All help appreciated!

Thank you for this idea.  The responsive settings work well for "default" tags (I think H2).  However, with H1, it's the same mess with giant letters.  For example, if you get it looking OK with your phone in vertical position, it is badly sized when you change the phone to horizontal position.  This is not a problem with the "default" tag.  I also tried custom sizing for mobile phone in the Nectar Slider settings on the page itself - and that works well for the "default" typography.  A mess with H1.

Default typography works perfectly and consistently.  H1 - I just can't use it reliably.

The mobile overrides work well for "default" tag no problem (that's what I did originally).  But H1 behaves very differently and inconsistently; especially when changing the phone's position from vertical to horizontal.

It didn't make a difference for me.  This is what my custom CSS box looks like now:

-----

.center-btn {
margin: 0 auto;
display: table;
}
body .fa.fa-linkedin:before {
    content: "\e605";
}
@media only screen and (min-width: 690px) and (max-width: 999px) {
    .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content {
        padding: 0 20px !important;
    }
    .swiper-slide .content h1 {
        font-size: 34px !important;
        line-height: 42px !important;
    }
}

I have a hint at what the problem COULD be (even with your CSS mods).

First, I'm using Firefox on an Android smartphone

The first time the page loads with H1, it's bad (phone is vertical).  Rotate the phone (horizontal), it's still bad.  Rotate back (vertical), and formatting is correct.  Rotate back to horizontal - bad again (for horizontal).

Try on an Android smartphone with Firefox.  The behavior is very inconsistent compared to default / H2.  Just tried on Google Chrome on smartphone - same results as described above.

Hi Judith,

I don't think this is about speed or image sizing.  What is happening is when the H1 tag is used, the Nectar Slider (the header portion) becomes unstable on smartphones.  To rule out the optimization question, I tried to completely disable WP Fastest Cache (beyond turning off its minify features) - and it made no difference in the outcome.

I'm reposting my current CSS text as a cut and paste to make sure there are no errors in what I have.

I think I solved the problem!  Of course, this was (likely) all my fault.

Contributing factors:

1. I had custom CSS in the front page that shouldn't have been there.
2. Once the above was cleared, changing the mobile font sizes were suddenly effective.
3. I found several out of date WP plug-ins that could have been conflicting.  Cleaned them all out.
4. It was necessary to have the addition CSS detailed below.  It would be good if there was a way to avoid this - but it did help for sure.

I have more optimizations to do, but this is largely solved for me.  Thank you for your time and patience!

Hi Judith,

I really value your theme - it has been a life saver for us.

I do have a remaining problem.  As far as I can tell, everything looks great on Android phones (Chrome, Firefox) and PC.  HOWEVER, the H1 tag in the Nectar Slider header causes the heading and the subheading to collide with one another on iPad Tablets (Safari).

The site is live now with H1 tags.  The problem goes away if I use the "default" tag option in Nectar Slider.  I suspect I need custom CSS for Safari.

My current CSS is just as before:

-----

.center-btn {
margin: 0 auto;
display: table;
}
body .fa.fa-linkedin:before {
    content: "\e605";
}
@media only screen and (min-width: 690px) and (max-width: 999px) {
    .nectar-slider-wrap[data-full-width="false"] .swiper-slide .content {
        padding: 0 20px !important;
    }
    .swiper-slide .content h1 {
        font-size: 34px !important;
        line-height: 42px !important;
    }
}

http://www.tifca.com

iPad Air 5 Safari.

OK - more info that is helpful.  If it is portrait mode (like you pictured below) - it is OK (I wasn't able to test for this before).  When it is in landscape mode - it is crunched as I described.

Screenshot of crunched text (landscape mode Safari)

FANTASTIC!  This fixed everything.  Thank you!

These CSS changes I've been making; do you think they are standard requirements when working with a theme like this, or is it possible that a future version of Salient will automatically factor in these considerations for a novice like me?