- This topic is empty.
-
AuthorPosts
-
May 19, 2014 at 12:44 am #170577
elixir_pr
ParticipantHi, 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.
May 19, 2014 at 1:19 am #170580Atelierbram
Participanthtml { 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; } }
May 19, 2014 at 8:28 pm #170643elixir_pr
ParticipantI 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.
May 20, 2014 at 12:45 am #170666Atelierbram
Participant@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.
May 20, 2014 at 8:25 pm #170756elixir_pr
ParticipantI 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)
May 21, 2014 at 12:35 am #170773Atelierbram
ParticipantWhen 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
online 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 of768px
, and vs kick in at992px
.May 21, 2014 at 1:23 am #170775elixir_pr
ParticipantI 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.May 21, 2014 at 2:01 am #170780Atelierbram
ParticipantI 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 the768px
media-queries to the992px
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 afterbootstrap.css
) is not a good workflow. It’s too repetitive and will become a bloated mess in yourCSS
-stylesheet.May 21, 2014 at 10:36 pm #170841elixir_pr
ParticipantAlternatively (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.
May 22, 2014 at 3:39 am #170849Atelierbram
ParticipantI 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 aCSS
preprocessor, before having a basic knowledge ofCSS
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:
External
Book recommendation
May 22, 2014 at 4:31 am #170850Atelierbram
ParticipantReply got lost in filter?, … probably because of many recommendation links, and have no copy of this …
May 22, 2014 at 8:06 pm #170888elixir_pr
ParticipantWhat?
May 23, 2014 at 2:01 am #170901Atelierbram
Participant@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
andCSS
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?
May 23, 2014 at 8:55 pm #170977elixir_pr
ParticipantI 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.
May 26, 2014 at 12:49 am #171077elixir_pr
ParticipantCan 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.