Title: CSS / Making text responsive inside a theme’s header
Last modified: March 22, 2017

---

# CSS / Making text responsive inside a theme’s header

 *  [benjaminblue](https://wordpress.org/support/users/benjaminblue/)
 * (@benjaminblue)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/css-making-text-responsive-inside-a-themes-header/)
 * greetings –
 * i know the rules said
    _Looking for help with a specific theme or plugin? Don’t
   post here – instead, head to the theme or plugin’s page and find the “View support
   forum” link to visit the theme or plugin’s individual forum._ but i wasn’t able
   to get help from the author for this, so i am trying here. Hopefully it’s not
   too inappropriate. If so, i understand.
 * I have a theme i have purchased and am happy with, but am having trouble doing
   something that shouldn’t be so hard – hacking to make the main text in this header
   responsive.
    [problem page](http://tommydorseymastering.com) go here resize the
   window – you’ll see the text “tommy dorsey mastering” resizes in a crude way.
   I used media queries based on the query that was there initially – it was worse
   out of the box. Now, it resizes at those breakpoints. I am hoping to make it 
   a fluid resize. I have been wrestling with the CSS in dev tools with little luck.
   if you look conversely at [proper page](http://bluedimensional.com/demos/extending-bootstrap/Default.html)
   and resize the window, you’ll see the header text resizes, in a fluid way.
 * is it the text-size-adjust: 100% inherited from bootstrap.min.css that is doing
   it properly? i am having the trouble trying to properly assign that property /
   adjust other properties on my problem page to mimic that proper example.
 * if you can guide me at all that’d be great. thanks in advance. I am moderately
   experienced in CSS and a bit new to wordpress advanced techniques. This theme
   has some great functionality and the client is happy, so I am not looking to 
   switch. I have been so frustrated and really appreciate the help.
 * ben
    -  This topic was modified 9 years, 2 months ago by [benjaminblue](https://wordpress.org/support/users/benjaminblue/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/css-making-text-responsive-inside-a-themes-header/#post-8942485)
 * One reason we ask you to get support from the theme’s support channel is we cannot
   access the theme’s source code, so we have no idea how it works and thus are 
   typically unable to help at all. We also expect people selling themes to support
   their product. If they will not after being paid, why should we for free?
 * I will offer some generic comments on CSS that are unrelated to any particular
   theme. A proper responsive theme that does not exceed the device’s viewport should
   not need a text-size-adjust rule.
 * To proportionally scale text according to the viewport width, do something like`
   font-size: 4vw;`
 * You will still need media queries to up the size as the width diminishes, but
   the interim sizes should appear more natural and the queries required minimal.
 *  [mdshak](https://wordpress.org/support/users/mdshak/)
 * (@mdshak)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/css-making-text-responsive-inside-a-themes-header/#post-8942500)
 * Hi,
    Please dont worry first. I can understand the situation. Please remove this
   custom css code at style.css of child theme:-
 *     ```
       @media (max-width: 450px) and (min-width: 320px){
       	.mm-panel {
       		width: 80%;
       		text-align: center;
       	}
   
       	a#logo.logo-text, #logo.logo-text, .logo-text{
       		white-space: nowrap;
       		margin: 0 !important;
       		padding: 0px !important;
       		display: inline-block;
       		font-size: 18px !important; 
       	}
   
       }
       ```
   
 * **Now use this custom css code:-**
 *     ```
       @media (max-width: 450px) and (min-width: 320px){
       	.mm-panel {
       		width: 70%;
       		text-align: right;
       	}
   
       	a#logo.logo-text, #logo.logo-text, .logo-text{
       		white-space: nowrap;
       		margin: 0 !important;
       		padding: 0px !important;
       		display: inline-block;
       		font-size: 16px !important; 
       	}
   
       }
       ```
   
 * Thanks
    Mohammad

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS / Making text responsive inside a theme’s header’ is closed to new
replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 2 replies
 * 3 participants
 * Last reply from: [mdshak](https://wordpress.org/support/users/mdshak/)
 * Last activity: [9 years, 2 months ago](https://wordpress.org/support/topic/css-making-text-responsive-inside-a-themes-header/#post-8942500)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics