Jump to content


Photo
- - - - -

Navigation bar text sizing problems

navbar

  • Please log in to reply
26 replies to this topic

#1 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 11 March 2014 - 07:23 PM

I am having major issues getting the text size to look good across multiple platforms.  Either it looks good on the website, and to large on the tablet; looks good on the tablet, text is really tiny on the phone, etc.  Please help!!!

Below is the code that i've found that controls the size located in the custom css section of pagelines.  The site is porterteam.org

 

 

.navbar .navline > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
float: none;
display: block;
padding: 5px;
line-height: 80px;
color: #fff;
color: rgba(255,255,255,0.9);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-transform: uppercase;
font-size: 30px; font-size: .9rem; 
}


#2 batman

batman

    Bat Learning

  • Members

  • 1994 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 11 March 2014 - 10:21 PM

Hi @dloux

 

I dont understand this code

 

font-size: 30px; font-size: .9rem; 

 

Please, you can change it

font-size: 30px;

or better 

font-size: .9rem; 

only one or another 



#3 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 12 March 2014 - 06:17 PM

Thanks @batman for your willingness to help me out, and great job cleaning up the streets of Gotham. :)  I did what you asked and changed it to just .9rem and these are the results I found this so far. 

 

font-size: .9rem; Looks great on the ipad (horizontal mode) but everywhere else (web pages and phones) is very small (you can check it out now at porterteam.org) 

 

font-size: 1.2rem; is is perfect on web pages and phones, but is too large on ipads (bumps the text down below the bar in the white space)

 

My question is from this designer (not a programer at all) is there not a way to make the text adaptive to the width of the site?  It seems like a simple concept to me but maybe there is more to it than that. 



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 March 2014 - 11:40 PM

Hi there, usually I'd use em for responsive text sizing. Check out http://www.webdesign...ive-typography/ which shows the @media code you can use to resize between the browser sizes using rem.

 

I've not used rem before personally but reading that thread it seems that it applies to the default font size on the device, so maybe try em instead first and see if that gives you a better result before making the @media changes.



#5 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 13 March 2014 - 05:11 AM

Sorry, I'm not very smart when it comes to this programing stuff :) a true designer here :| I started reading and got halfway through the first paragraph and was just looking at the screen with a blank look on my face and even less in my head. Is there something I can try as an example? Is what I'm asking this unheard of? Seems a simple concept in my mind anyways.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 March 2014 - 02:35 PM

@media queries allow you to basically add styling for specific conditions, such as when your screen is a specific width.

 

So what you can do is prefix your code you included in your first with the @media query for different screen widths.

 

For example:

 

@media (max-width: 480px) {
  .navbar .navline > li > a {
    line-height: 80px;
    font-size: 30px; font-size: .9rem; 
  }
}

 

The above would be used for mobile devices such as iPhones, you will want to reduce the font size and line-height. You can then do the same for different device widths, for more information, I recommend you read the following:

 

https://developer.mo...S/Media_queries

http://css-tricks.co...andard-devices/


  • batman likes this

#7 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 13 March 2014 - 04:44 PM

Thanks @Danny  I tried replacing the navbar code I posted earlier with the code you suggested and it made everything tiny (across all devices) and pushed it up at the top touching the back bar.   Am I missing something?  I even tried to adjust some of the values in the suggested code and it did not change the size or anything for that matter.  This should not be hard to do correct?  Has html coding really not came very far since the last time I took a class with it in 1998? :)



#8 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 March 2014 - 11:40 PM

Hi there,

 

If you're seeing changes in the screen after adding the code it could be some code above in the css panel isn't correct, if there's anything broken or not closed in the css above it will stop the below being read.

 

I've just tested the code below for changing the font-size based on the width of the screen using @media. See the screencast below to see the changes, it's a bit dramatic as it's set to 40px but you'll see where it changes.

 

http://screencast.com/t/b9PqT2LeCYu

 

@media (max-width: 900px) {
  .navbar .navline > li > a {
    font-size: 40px;
  }
}



#9 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 14 March 2014 - 02:57 AM

I see how that works for you, but it's not working for me at all.  When In replace the code that you gave me it acts exactly like the original code. There is no resizing going on at all.  Am I missing something? Is there someplace else besides custom CSS that options for the nav bar text size is hiding?  I can't be the only one that ran into this.  It's just weird. 



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 March 2014 - 08:58 AM

Please provide the code you have used, as the code from my previous post required you to change the font size which I mentioned. If the font size is effecting all screen sizes then you have something causing an issue, as my code shouldn't be doing what you're saying it is.

 

Here is working example for the Masthead, view the code which I have highlighted and you can see that for each media query, the masthead title font size either increases or decreases based on the screen width.

https://github.com/p....less#L106-L161

 

This is exactly what you need to do yourself for your Navbar.

Please be aware that we do not provide extensive CSS support, I recommend you signup to a CSS specific forum and ask your CSS questions there.


  • batman likes this

#11 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 17 March 2014 - 07:27 PM

I guess i'm still confused here, where do I put the highlighted code  at?  I replaced the font size part with the code you suggested and it made the navbar text a bit smaller but that's about it, it was static.  Below is my custom CSS code i've been editing.  There is more code in the custom css section but this is what is effecting the size of the nav font size.  

Note: when I remove this out of the custom CSS it changes the text to a very basic 12pt font with no formatting, so I know this is the part that's affecting the size.  It's been over a week now and i've made no progress what's so ever.  

 

.navbar .navline > li > a {

text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
float: none;
display: block;
padding: 5px;
line-height: 80px;
color: #fff;
color: rgba(255,255,255,0.9);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-transform: uppercase;
font-size: .9rem; 
}


#12 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 March 2014 - 11:57 PM

Hi there, the highlighted code needs to be edited to suit the font size you're looking for and then pasted into your custom css panel.

 

The code you put in here overrides the core css - http://screencast.com/t/fdWG5Thz

 

If you have other css in there relating to the font size for the nav you'll need to remove this first and replace it with the new code, otherwise one will be overriding the other.



#13 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 18 March 2014 - 08:10 PM

Still the same outcome, I believe there is something in there someplace that i'm not seeing.  Here tell me this if this will be eiser, because this is the ONLY thing i'm having an issue with and the site is done.  I'm going to paste the entire custom css code below, if one if you could fix whatever it is and post it for me to try, so I can be done with this.  Let me know if that will work. 

 

http://forum.pagelin...st/p/28-mm94ld/



#14 batman

batman

    Bat Learning

  • Members

  • 1994 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 March 2014 - 08:27 PM

Hi there

I´m not sure but you can verify things like this, for example 

http://screencast.com/t/1qDmnkKu



#15 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 18 March 2014 - 08:48 PM

sorry, I don't understand



#16 batman

batman

    Bat Learning

  • Members

  • 1994 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 March 2014 - 09:02 PM

Hi again..

 

I believe that the correct code is 

 

.plbrand  { margin:0px 2% 0 0; }

 

for example, but I can be wrong


  • Martin Davies likes this

#17 Martin Davies

Martin Davies

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 18 March 2014 - 09:04 PM

OK so - you need to take the whole CSS you pasted in the reply above (i removed all this and added to the paste functionality and then pasted the link) go to http://jigsaw.w3.org/css-validator/ and paste in the code in its entirety - the validator will tell you where the issues are. 

 

This is basically what @batman did above for you. if you open { you need to close it 

 

the validator will point out this and other errors you have made in the code. Follow the steps provided by the validator to fix this. 


  • batman likes this

#18 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 19 March 2014 - 08:44 PM

Hello @batman I tried replacing the code "font-size: .9rem;" with the one you provided and it did just like the other times where it made it about 75% of it's current size and did not resize on any devices.  As for the validator thing, I did as you said and it pulled up like 30 pages of code that to me it might as well been in japanese.

 

i'm just a designer trying to edit content on a already built site, this was a simple (i thought) problem that the owner of the site pointed out. 



#19 Martin Davies

Martin Davies

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 March 2014 - 09:53 PM

Did the validator point out any errors in red? 



#20 dloux

dloux

    Member

  • Validating
  • 15 posts
  • Country: Country Flag

Posted 19 March 2014 - 09:58 PM

There is a million pages, where would the red parts be? 

 

http://jigsaw.w3.org...arning=&lang=en







Also tagged with one or more of these keywords: navbar