Site maintitle not optimized for mobile

I’m trying to make my maintitle headlines mobile-friendly. It seems that after I changed the font and size through CSS, it no longer responsively adapts to different devices. It looks fine when I open it on desktop, but the words appear in disarray on mobile.

I’d appreciate your help, thanks a lot.

Hello there,

You should you CSS media query to restrict specific style rules to be executed on defined screen width. For example:


@media only screen and (min-width:1024px){
   // Your styles go here
}

Read on this article for complete information about media query.

Regards,
Kharis

My website is davidshkim.com.

When I open it on mobile (galaxy s7), the words still appear crunched up…

I just want to make sure it appears as:

HI, I’M DAVID. I’M A
DIGITAL MARKETING
SPECIALIST
IN VANCOUVER

Only on mobile sized screens, even if the fonts would be made smaller as long as its ratio to the background is user friendly. Thank you.

Hello there,

Try adding the below custom CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS).


@media only screen and (max-width:767px){
  
  .text-slider .maintitle {
    line-height: 40px;
  }
  
  .maintitle span[style="font-size:50px;"]{
     font-size: 18px !important; 
  }
  
  .maintitle span[style="font-size:65px;"]{
     font-size: 26px !important; 
  }
  
  .maintitle span[style="font-size:50px;"]{
     font-size: 18px !important;  
  }
  
}  

Regards,
Kharis

The CSS code doesn’t seem to work. The fonts still stay in the same size on mobile screens.

Please take a look at : http://www.lawrence-chung.com/ as an example. The fonts decrease responsively in proportion to the screen size.

Hello there,

I noticed your site has been cached by W3 Total Cache plugin. In order to see the changes after new code addition, you need to clear cache first.

Regards,
Kharis

Worked like magic. Thanks Kharis.

I don’t know what happened but the css code stopped working. Now it appears crushed up again…

I have the same code in it:

@media only screen and (max-width: 1024px){

.text-slider .maintitle {
line-height: 40px;
}

.maintitle span[style=“font-size:50px;”]{
font-size: 18px !important;
}

.maintitle span[style=“font-size:55px;”]{
font-size: 26px !important;
}

.maintitle span[style=“font-size:50px;”]{
font-size: 18px !important;
}

}

In my header, i have this code:

<script>
jQuery(function($){
$(’.text-slider .maintitle’).html("<span style=“font-size:50px;”><span class=‘notbold’>HI, I’M DAVID. I’M A</span></span><br><span style=“font-size:55px;”><b>DIGITAL MARKETING SPECIALIST</b></span></br><span style=“font-size:50px;”><span class=‘notbold’>IN VANCOUVER.</span></span>")
});
</script>

I’d appreciate your help please. Thanks.

Hello there,

I visited your site, it appears you’ve been using the default slide text. Please let us know if you still need assistance.

Regards,
Kharis

What do you mean by default slide text? How could I change that in order to make it function again?

Hello there,

I would like to apologize in advance for I clicked incorrect link you shared.

Please try to replace the custom jQuery code with this one:


<script>
  jQuery(function($){
  	$('.text-slider .maintitle').html("<span><span class='notbold'>HI, I'M DAVID. I'M A</span></span><br><span ><b>DIGITAL MARKETING SPECIALIST</b></span></br><span ><span class='notbold'>IN VANCOUVER.</span></span>");
  });
</script>

Then apply the below custom CSS code:


@media only screen and (min-width:768px) and (max-width:899px){
  
  .maintitle span:nth-of-type(1),
  .maintitle span:nth-of-type(3){
    font-size: 40px;
  }
  
  .maintitle span:nth-of-type(2){
    font-size: 45px;
  }    
  
}  

@media only screen and (min-width:900px){
  
  .maintitle span:nth-of-type(1),
  .maintitle span:nth-of-type(3){
    font-size: 50px;
  }
  
  .maintitle span:nth-of-type(2){
    font-size: 55px;
  }  
  
}

Let me know how it goes.

Regards,
Kharis

Thanks!

You’re most welcome and best wishes.

Regards,
Kharis