Changing font size

Site URL: https://bettertotalk.com

Hi,

I'm trying to change some text size in my footer in mobile view only. For some reason none of the font-size commands seem to have an effect. Code is below (the second part) and is located in a code block within the footer itself. I added in the background-color bit just to be sure that I am referencing the correct block and it works fine so it's just the font size that has no effect.

Thanks in advance!

<style>
  @media only screen and (min-width: 601px){
    #block-yui_3_17_2_1_1661168201465_60548{
      position:relative;
      top:-6px
    }
  }
  @media only screen and (max-width: 600px){
    #block-5457f48e1c64898f4c01{
      font-size: 50% !important;
      background-color:red
    }
    {
    
</style>

Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-62e6c5861df8fc47dd4cde1b * {
    font-size: 12px !important;
}
}

5 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-62e6c5861df8fc47dd4cde1b * {
    font-size: 12px !important;
}
}

 

Thanks @tuanphan, this does change the font size, but it is applying it to the entire footer. I am trying to change only the 'better to talk' text, which is block id: #block-5457f48e1c64898f4c01

Also, is there any particular reason why this should be in custom CSS, rather than embedded in a code block in the footer itself?

Thanks!

On 8/26/2022 at 10:18 AM, tuanphan said:

#1. Use this new code

@media screen and (max-width:767px) {
div#block-5457f48e1c64898f4c01 * {
    font-size: 12px !important;
}
}

#2. Both are same. But add to Custom CSS will be easier to manage/edit in the future.

Thank you!