Jump to content

Archived

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

dloux

Navigation bar text sizing problems

Recommended Posts

dloux    0
dloux

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; 
}

Share this post


Link to post
Share on other sites
batman    389
batman

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 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
dloux    0
dloux

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. 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, usually I'd use em for responsive text sizing. Check out http://www.webdesignerdepot.com/2012/10/a-simple-guide-to-responsive-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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
dloux    0
dloux
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.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

@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.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dloux    0
dloux

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? :)

Share this post


Link to post
Share on other sites
James B    436
James B

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;
  }
}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
dloux    0
dloux

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. 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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/pagelines/dms-bootstrap/blob/master/sections/masthead/style.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.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dloux    0
dloux

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; 
}

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
dloux    0
dloux

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.pagelines.com/pst/p/28-mm94ld/

Share this post


Link to post
Share on other sites
batman    389
batman

Hi there

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

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


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman    389
batman

Hi again..

 

I believe that the correct code is 

 

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

 

for example, but I can be wrong

  • Like 1

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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. 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
dloux    0
dloux

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. 

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Did the validator point out any errors in red? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

there are 592 possible problems with your CSS. http://screencast.com/t/xFm0zoRyijC

 

one problem with your css will stop other CSS from working. 

 

As ideal as it might not be for you you will have to correct those errors in your CSS for any other CSS you add to work. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
dloux    0
dloux

I understand, I had no idea there was this many problems with the site when I took it over.  The problem is i'm no programer, so don't even know where to start or even how to correct one.  Looks like they are out of luck on fixing this problem. 

 

 

 

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

to fix the issues you would have to fix all those errors. maybe they would pay you to fix them.. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
dloux    0
dloux

Or someone else for that matter.  i'm not programer, just a mere designer.  :) 

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

ah i see what you mean. :) 

 

If you ask the client to email our support desk on hello at PageLines dot com we will be able to give them a list of developers who are available to accept work.


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated! 
       


×