Bootstrap in Joomla template, reduce font size on small screen

[elixir_pr]

Hi, I am creating a template for Joomla with Bootstrap. For the menu (which has several classes assigned including .nav which tells the font-size), I want the font-size to reduce when the window size is reduced or the screen resolution is equal to or less than 1024×768. I know this has something to do with media query, but I am too new to all this to do it by myself.

[Atelierbram]

html {
 font-size: 16px;
}
.nav {
 font-size: 1em;
}
@media (max-width: 1024px) {
 .nav {
   font-size: 0.875rem;
 }
}

or mobile first approach:

.nav {
 font-size: 0.875em;
}
@media (min-width: 1024px) {
 .nav {
   font-size: 1rem;
 }
}

[elixir_pr]

I tired this but nothing happened. When the window is small, the menu items overflow to next line – which is what I want to stop, I want the menu text to reduce in size when the window size is small.

[Atelierbram]

@elixir_pr
You could help us help you, and thereby help yourself, by

• providing a link to this template you are creating, on a live site, or maybe a copy parked somewhere on the inter-webs

or

• by making a reduced test-case on Codepen

Right now one can only guess what the cause might be.

[elixir_pr]

I have installed the template on http://www.piph.prime.edu.pk – theres a menu at top, I want its text to reduce in size if the site is opened on screen with smaller resolution (1024×768)

[Atelierbram]

When you would target the ul element in the menu called .nav in the media-query for/to medium-breakpoint, like

@media (max-width: 991px) { 
 .nav {
  font-size: 12px;
 }
}

then you will have reduced the font-size on smaller screens.

the menu items overflow to next line – which is what I want to stop

However this is not what I recommend you to do, because it will not prevent the menu items from wrapping in two lines on smaller screens. What I do recommend is trying the next thing out: changing the breakpoint variable in variables.less file @grid-float-breakpoint from small- to medium-screen.

In variables.less on line 299 change @grid-float-breakpoint: @screen-sm-min; to @grid-float-breakpoint: @screen-md-min;

After compiling (happens ‘on-the-fly’ with Less ), you will see the hamburger icon in the right corner disappear after a screen-width of 992px instead of 768px, and vs kick in at 992px.

[elixir_pr]

I used the above piece of code but still nothing happened. I pasted this code in .css file.
I could not try the method you recommended because I have no knowledge of .less, all I have is a bootstrap.css file.

[Atelierbram]

I have no knowledge of .less, all I have is a bootstrap.css file

You could do yourself a huge favour to solve this problem by learning Less, because the basic styles on your site are generated from the Less that comes with Bootstrap.

Alternatively (not recommended) is getting rid of the Less, and only work with CSS files, and move the declarations for .nav and .navbar-* from the 768px media-queries to the 992px media-queries.

Any other alternative, like overriding values in a custom stylesheet, (also note that because of the cascading nature of CSS this has to be declared after bootstrap.css) is not a good workflow. It’s too repetitive and will become a bloated mess in your CSS-stylesheet.

[elixir_pr]

Alternatively (not recommended) is getting rid of the Less, and only work with CSS files, and move the declarations for .nav and .navbar-* from the 768px media-queries to the 992px media-queries.

I wanna try this. Can you please explain a little more. I looked into bootstrap.css but couldn’t understand much. How do I move .nav and .navbar-* from 768px media-queries to the other ones. I searched for media-queries in the files, there were a lot of them with different sizes.

[Atelierbram]

I wanna try this. Can you please explain a little more. I looked into bootstrap.css but couldn’t understand much.

You wrote before you are ‘too new to all this’, but are you willing to deepen your knowledge of CSS?

There is this thing called ‘trying to run, before knowing how to walk’ , I know I did this, and still do sometimes, but at some point you will have to stop and make a decision if you are willing and able to continue investing time into something.
If so, there are books out there, and this website has some of the best tutorials on the subject you can find.
I will try to give an example of this kind of (basic) CSS-edit, or maybe someone else on this forum will, before I did.

BTW: Now instead of changing one variable name in a preprocessor file, one has to painstakingly edit lots of declarations in the rendered CSS, … but then working with a CSS preprocessor, before having a basic knowledge of CSS is like trying to run before knowing how to walk too , but maybe after that basic knowledge is there I am tempting to say: go for it.

Reading recommendation from this site:

• on Media-queries
• Musings on Preprocessing

External

• Learn to Code HTML & CSS
• Responsive Web Design by Ethan Marcotte

Book recommendation

• Anything by Eric Meyer

[Atelierbram]

Reply got lost in filter?, … probably because of many recommendation links, and have no copy of this …

[elixir_pr]

What?

[Atelierbram]

@elixir_pr replied yesterday, maybe too extensively, with too many recommendation links, which put that one in some sort of spam-bin, maybe @Paulie_D , or one of the other forum-coordinators can look into this.

To summarise: basically asking how serious you are about learning HTML and CSS

I am too new to all this to do it by myself.

What kind of books on web-design have you been reading so far, what kind of online tutorials?
What does this Joomla CMS environment, and template creation, mean to you?

I looked into bootstrap.css but couldn’t understand much.

Do you understand what is does, … reset and grids?

[elixir_pr]

I am not totally new to all this, I have worked with CSS before but never with CSS 3. I have created a Joomla template once before. I just don’t understand this media queries thing. I will look into the resources you posted.

[elixir_pr]

Can you please tell me how I can change the .css file to show the mobile menu on medium screens instead of just small screen. That would partly solve my problem.

[Author]

Posts