Hi Sheri

I have further amended your CSS, fixing this issue.

Ciarán

Hi,

Thanks for that. The font size seems to be correct on smart phones....BUT the logo is completely pushed to the right. Is there any way that I can now center the logo in responsive mode?

Regards,
Sheri

Hi Sheri

I have amended your CSS slightly and it now appears to be working correctly.

Ciarán

Hi

Your CSS appears to be correct. May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán

/* #Tablet (Portrait)
====================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
h1.logo-text a {font-size: 30px;}
}

/* #Mobile (Landscape)
====================== */
@media only screen and ( min-width: 300px) and max-width: 360px ) {
h1.logo-text a {font-size: 14px;}
}

/* #Mobile (Portrait)
====================== */
@media only screen and ( min-width: 300px) and max-width: 360px ) {
h1.logo-text a {font-size: 12px;}
}

h1.logo-text a {
top: 40px;
}

Hi Sheri

Please paste the Custom CSS you are using.

Ciarán

Hi Ciaran,

I understand the constraints and will try to make this work using your suggestion. However, when I added the CSS code to the template Custom CSS field, I don't see that the logo changes font on mobile devices. (I was too quick in saying that the code worked earlier in this thread.) Perhaps I have placed the code in the wrong place? Would you be willing to take a look? I pasted all of the code below in the Custom CSS section of the template instance I am using as the default.

Thank you.

-Sheri

Hi Sheri

Considering the limited space in the logo area of this template your only real option is to reduce the font size of the font logo as there simply is not the available space to wrap the logo to a second line. Placing the above CSS within a media query as described will mean this font change should only effect your logo on smaller screen devices and not your desktop.

Ciarán

Hi,

I'm afraid that this code didn't really work for me. I am trying to make a long business title work properly in responsive mode.

The client requires that the entire business title be on one line for regular screens. She would prefer the title to word wrap and shrink for mobile devices to either 2 lines (preferred) or 3.

2 lines would be:
Law Offices of
Lisa M. Bluestein, LLC

3 lines would be:
Law Offices
of Lisa M.
Bluestein, LLC

If we can do this with the horizontal lines on either side of the logo like on the template, that would be even better but I don't think adjusting an image this way would be possible. I await your expert advice.

Many thanks!
Sheri

P.S. Upon receipt of your answer, I can send you log in info.

Hi Sheri

Try adding the following to the Custom CSS field of your templates parameters...

h1.logo-text a {

    top: 26px;

}

By default your logo is set to 26px from your top menu so decreasing or increaing this number in the above CSS will move your logo text up or down respectively

Ciarán

Hi again,

Now that I have resized my text logo in Metropolis, I realize that it is not centered vertically in the logo area because my client doesn't want to use a tag line. How can I center my text logo vertically since the y axis parameters only seem to work for an image?

Thank you!

That's perfect, Ciaran. Thank you so much for your excellent customer service!

Hi Sheri

Try adding the following to the Custom CSS field of your templates parameters which will edit your logo font size depending on the screen size your site is been viewed on. You can edit this to your own taste to best suit your logo text...

/* #Tablet (Portrait)

====================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {

h1.logo-text a {font-size: 34px;}

}



/* #Mobile (Landscape)

====================== */

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

h1.logo-text a {font-size: 34px;}

}



/*  #Mobile (Portrait)

====================== */

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

h1.logo-text a {font-size: 34px;}

}

Hope this helps

Ciarán