Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Footer Font Size on Mobile

Recommended Posts

jmad

I've increased the font size of the widget titles and text in the footer.  They look fine on desktop however on mobile devices the fonts are almost so thin they are invisible.  The font six is 16 and weight 400.  

 

I've tried changing font weight with @ media and that doesn't see to have any impact.  What do I need to change to keep that font from changing?

 

site is msdesign.wpengine.com

Share this post


Link to post
Share on other sites
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

 

Had to revive this.  My css reflects my footer fonts being a 600 weight but they end up very thin looking.  Can't figure out why.

 

Add on question... I have this code in a text box in the footer.  I've inspected and it appears to be the a href causing the extra margin but it shows 0 margin and I can't find another setting impacting it.  After I added zmt then the space disappeared but returned on refresh.

 

<ul class="unstyled zmt" style="font-size:15px"><li><a class="zmt" href="mailto:[email protected]?Subject=Hello%20fromhomepage" target="_top">
[email protected]</a></li> rest text and </ul>

Share this post


Link to post
Share on other sites
jmad

Yes.  I got the font weight issue sorted.  

 

Any advice on how to remove the extra margin?

Share this post


Link to post
Share on other sites
Danny

What do you mean extra margin ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Between the Title of the text box and the start of the text in the footer.  For the 1st box with the email link in it, it's pushed down more than the other regular text.  I compensated by adding a <br> before the text in the other text boxes but would like for there to be less space between the title and text.

 

I have this code in a text box in the footer.  I've inspected and it appears to be the a href causing the extra margin but it shows 0 margin and I can't find another setting impacting it.  After I added zmt then the space disappeared but returned on refresh.

 

<ul class="unstyled zmt" style="font-size:15px"><li><a class="zmt" href="mailto:[email protected]?Subject=Hello%20fromhomepage" target="_top">
[email protected]</a></li> rest text and </ul>

Share this post


Link to post
Share on other sites
Danny

Remove the <br /> tags there not needed, just add margin bottom instead to all of them.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Not following you.  When I first set up the box with <ul class="unstyled zmt" style="font-size:15px"><li><a class="zmt" href="mailto:[email protected]?Subject=Hello%20fromhomepage" target="_top">

[email protected]</a></li> rest text and </ul>  I get a large margin between the title and the href but only in this text box...this space was about one extra <br> than the other text boxes I set up.  So I added the <br> to the other boxes.  
 
I didn't add a <br> to the first box.  

Share this post


Link to post
Share on other sites
Danny

There is a <br> tag in the first box - http://cl.ly/image/411X1i2p0Q3z

 

Remove them all and just use margin-bottom: 10 or 20px for each box, to give you some space between the title and content.

 

Also you're using zmt utility class, this stands for zero margin top, meaning anywhere you add that class, it will remove any margin top for that element, are you using this on purpose or have you copied this code from somewhere else and didn't know what it did ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Where is that break coming from because I have only text in the title and this in the body?

 

<ul  class="unstyled zmt" style="font-size:15px"><li><a class="zmt" href="mailto:[email protected]?Subject=Hello%20fromhomepage" target="_top">
[email protected]</a></li><li>573.808.5053</li><li>PO Box 1071</li><li>DeLand, FL 32721</li>
</ul>
 
I'll try another method and see if that works.  Update: I moved the link to below the phone number and the issue resloved but now there is a <br> appearing between the phone and email.  Not sure why a break would be dropping in before a link.
 
Oddly, I simply retyped the code and it cleared the problem.  I wonder if it was because I had copy and pasted the code.
 
Issue resolved.

Share this post


Link to post
Share on other sites
Danny

You need to make sure that all your HTML is one line, Wordpress loves to add <br /> or <p></p> tags whenever there is a new line, this could be the cause of the issue. I would suggest typing your code in your code editor such as SublimeText make sure its on one line and then copy ands paste it into the TextBox/MediaBox.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

That's actually what I did but somehow it was still picking up a <br />.  Anyway, after I just typed it then it's all good. 

 

Thanks. 

Share this post


Link to post
Share on other sites

×