Jumbotron font size won't rescale for mobile / isn't responsive

Illdy
1

Hi

I love the Illdy theme but am really stuck on making my site responsive. I have trawled the forum and tried lots of code in the CSS but nothing has fixed my issues.

I need to make the following titles scale to fit the screen, and also get rid of some of the excess white space (see screen shot images).

My site is caroline-morris.com

Help!

2

Hey there,

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. You may adjust the font size to your liking.

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


/*header font size for tablet*/
@media(max-width: 768px){
  #header.header-front-page .bottom-header h1{
    font-size:55px!important;
  }}
  
/*header font size for mobile*/
@media (max-width:525px){
   #header.header-front-page .bottom-header h1{
    font-size:50px!important;
  }}

Best regards,
Support.

3

ok great it’s fixed the title but not the top left text (where a logo would go) - can you give me the code for that too please?

Also it’s not fixed the white space issue yet…

4

Can you get back to me as above please - hoping to get everything fixed asap :slight_smile:

5

I try to change de css also for the logo, & it worked like this :

/header font size for tablet/
@media(max-width: 768px){
#header .top-header .header-logo{
font-size:23px!important;
}}

/header font size for mobile/
@media (max-width:525px){
#header .top-header .header-logo{
font-size:12px!important;
}}

6

OMG it worked!

Thanks so much!!!

7

Hello there,

Nice work providing the solution to this issue @mayaab.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support