Jumbotron Text Size Does Not Scale

Hi,

I am trying to adjust the Jumbrotron Title text so that it scales down when viewed on a mobile device. Is there a way to have the font scale down when viewed in a smaller window or on a mobile device.

My issue right now is that the font is too big on mobile and will not shrink when a desktop window is resized. Maybe if the font didn’t wrap onto the next line this could help.

Please Help!

My site is: https://www.apexdigitalny.com/

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*Mobile CSS*/
@media (max-width: 550px){
  #header .bottom-header h1 {
    font-size: 40px;
    line-height: 45px;
  }
}

Best Regards,
Support

Hi,

It definitely is getting better but it still gets cut off, and the padding from the top of the page on mobile is too large. Heres a screenshot.

Thank you

Hey there,

Thank you for replying with this information.

I adjusted the code to fix the padding as well, so remove the code that was given and replace it with this
You can also edit the values to suit your liking.
Change the font-size and padding-top to your liking.

/*Mobile CSS*/
@media (max-width: 550px){
  #header .bottom-header h1 {
    font-size: 30px;
    line-height: 45px;
  }
  #header .bottom-header {
    padding-top: 100px;
    padding-bottom: 0px;
}
}

Best regards,
Support.

Hi, there…

This is my first time commenting here, I just started using one of your themes and I’m having the same problem. I love the look of it and how easy it is to personalize, but the jumbotron along with the text on it doesn’t adjust on mobile, it looks really bad actually. Will this piece of code also work on my theme?

My site is http://whalesharkseo.com/ and I’m using the illdy theme…

As you can see in the screenshot attached, the letters are too big, they don’t adjust to show a whole word per line, the image looks low quality because of its size, and the text even cuts off on the 2 buttons…

In case this code would also help me, would it go under Stylesheet (style.css)?
I ask this because I don’t see a ‘Additional CSS’ option.

Any help will be greatly appreciated. THANKS!

The code above worked for the text! Thank you!

Unfortunately the image still doesn’t scale down.

dan40 I wanna ask you how can do icons on the right side(contact us as message image)?

Hi @dan400,

How you want the images to scale down? Also note that, it is mobile, and we can’t scale down the images correctly to fit inside the header just like desktop.

Let us know,

Thanks,
laranz.

Hi Laranz,
thank you for your reply… I see what you’re saying about the image not being able to scale down. I guess I can live with that, I was just hoping the jumbotron image would look smaller on mobile. I have a bigger issue now, that I can live with the image not scaling down haha… Thanks again!

Hi Fatoo…

I apologize but I don’t really understand your question. I am also a participant looking for help jeje and I looked on my own site to see if there was something there on the right you were talking about, but I couldn’t see what you mean…

Hey @dan40

Try this you can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*adjust button and jumbotron front size*/
@media (max-width: 550px){
  /*button size*/
  #header .bottom-header .header-button-one{
    font-size: 12px;
  }
  #header .bottom-header h1{
    font-size: 20px;
  }
}

Best regards,
Support.

Hi there, that actually helped a lot!! THANKS!

The image is not as big now, which looks better, and It even fixed ONE of the buttons, now the whole button text is inside the button, for the top button (see before and after screenshots). Unfortunately, it didn’t do the same for the second button.

Hi,

Try this for mobile buttons,

/* For buttons */
@media only screen 
  and (max-width: 480px) {
	#header .bottom-header .header-button-two { line-height: 4; }
	#header .bottom-header .header-button-one, #header .bottom-header .header-button-two {  font-size: 14px; }
}

Let us know,

Thanks,
laranz.