CSS / Making text responsive inside a theme’s 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
    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 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 7 years, 8 months ago by benjaminblue.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    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.

    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