[dawnmartinelloParticipant]

Hi guys!

I’m trying to reduce the size of h1, h2, h3 and h4 on mobile phones. It’s huge! I searched and tried:

1. adding response headlines ([custom_headline type=”left” level=”h2″ looks_like=”h2″ class=”my_headline”] YOUR HEADLINE GOES HERE [/custom_headline][responsive_text compression=”1.0″ selector=”.my_headline span” min_size=”12px” max_size=”50px”]

While this one did work for reducing the various sizes, it made some weird things happen on the site in desktop. When I’d go to the page, for a split second the size of those fonts were massive on the screen before they reduced to their regular size. It was also making some of the headings appear permanently different sizes on desktop.

2. I found several bits of CSS for reducing the sizes which I added into the cusomize > custom but they didn’t have any effect.

In addition, I had someone mention that on their larger phone screen, many of the titles were being cut off. When I look at the site with my smaller phone the headlines do fit, but they’re butted right up against the edge of the screen.

>> do you have a solution for both of these items that I could try?

The site is dawnmartinello.com and I’ll pop in the admin access below if you need it.

[dawnmartinelloParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

#1 Please remove [responsive_text]shortcode from your page, navigate to Cornerstone settings tab and add resposive text element, see the attachments.

#2 Please provide us with URL of page in question.

Hope it helps.

[dawnmartinelloParticipant]

I’m sorry, I’m not sure where to find the cornerstone settings.

The pages I’m having trouble with is just the home page: http://www.dawnmartinello.com

Specifically, everything that is inside the top banner plus every headline on that page. On my samsung phone, the <h3> heading sizes are the biggest I’d like any of the headings to go on mobile.

In terms of the padding, it’s the same thing – the headings and everything in the banner.

[ChristopherModerator]

Hi there,

#1 Sorry for the confusion, you’re using visual composer and provided solution works for cornerstone.

There is no more responsive text shortcode in your page so I can’t see the issue you’re referring.

To reduce the font size in mobile devices, please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){
h1,.h1{
font-size:24px;
}
h2,.h2{
font-size:22px;
}
h3,.h3{
font-size:20px;
}
h4,.h4{
font-size:18px;
}
h5,.h5{
font-size:16px;
}
}

#2 Please edit content band and check the box ‘inner container’, see the attachment.

Hope it helps.

[dawnmartinelloParticipant]

Thank you! The font settings are perfect.
Is there a way to only have the padding available on mobile devices for the top banner? When I apply this, it shortens the black box on the desktop and doesn’t look very appealing. It’s only the text box in that section that needs the padding added – the picture looks fine on mobile as is.

[RupokMember]

Hi there,

Thanks for updating. I didn’t get your issue correctly. Would you add a screenshot that what you are trying to achieve?

Thanks for your patience.

[dawnmartinelloParticipant]

Absolutely. I’ve attached a screenshot of how the top of the page looks on mobile. On some mobile devices, the headings are actually getting cut off. I have a small screen and you can see the text is butted up against the left hand side. I’d like it to look more how it does in the body (where I assume the container is helping to keep it looking good).

When I use the inner container for the top portion of the box it goes from looking great on a desktop to losing the look of the full width (both attached).

I’d like to ensure the full width of the dark grey banner stays there on any device, I’d just like the font at the top to be pushed in when viewing on mobile.

[RadModerator]

Hi there,

Please add this CSS as well,

  .home #x-content-band-2 > .x-container {
  padding: 0 10%;
  }

About the headings, you should use responsive text feature, like from here theme.co/x/demo/integrity/1/shortcodes/responsive-text/

Cheers!

[Author]

Posts