html (5) & css 'responsive'

[TMobile]

hi there,

 

i've been making a website, which works fine on pc, but i want the 'nav' to be looking neat on mobile as well, what happens is:

 

in my nav i have a table (1 (row) high, 4 wide), and on mobile the two words aren't next to each other but under each other.

is there anyway to fix this?

 

if you want the pictures or something please say so,

 

Also sorry for the not so great english

[Mira Yurizaki]

2 minutes ago, TheThymo said:

in my nav i have a table (1 (row) high, 4 wide), and on mobile the two words aren't next to each other but under each other.

is there anyway to fix this?

This is a font size/letter spacing issue. You can either use a smaller font size or a shorter letter space (http://www.w3schools.com/cssref/pr_text_letter-spacing.asp)

[TMobile]

i hope these could help

[TMobile]

Just now, M.Yurizaki said:

This is a font size/letter spacing issue. You can either use a smaller font size or a shorter letter space (http://www.w3schools.com/cssref/pr_text_letter-spacing.asp)

the problem is, that it will look really weird, a small font

 

[TMobile]

and yes, this is very basic, but you gotta start somewhere

[Mira Yurizaki]

1 minute ago, TheThymo said:

the problem is, that it will look really weird, a small font

I forgot there's another option: changing the size of the containers the text is in.

 

I'm tempted to believe there's a way to allow text to span to infinity on a line, but if you did that, there's a chance a letter would be cut off.

[Terrorjoekel]

This reaction may or may not be extremely useless, but i usually use a css framework called Bootstrap to allign stuff properly. The task you are talking about can be achieved really easily with Bootstrap. You basically use classes on html elements to make them behave in a certain way. It will also handle responsiveness for you automatically, ofcourse only when the classes are used correctly. 

[TMobile]

1 minute ago, M.Yurizaki said:

I forgot there's another option: changing the size of the containers the text is in.

 

I'm tempted to believe there's a way to allow text to span to infinity on a line, but if you did that, there's a chance a letter would be cut off.

such an easy sollution, and it worked thx! xP

[TMobile]

Just now, Terrorjoekel said:

This reaction may or may not be extremely useless, but i usually use a css framework called Bootstrap to allign stuff properly. The task you are talking about can be achieved really easily with Bootstrap. You basically use classes on html elements to make them behave in a certain way. It will also handle responsiveness for you automatically, ofcourse only when the classes are used correctly. 

M. Yurizaki's sollution worked, thx for the help tho

[Terrorjoekel]

1 minute ago, TheThymo said:

M. Yurizaki's sollution worked, thx for the help tho

That's great, you might want to keep this in mind for the future. Doing CSS manually is a pain sometimes. Auto Responsiveness with nice animations without trouble whatsoever can be of use when things get more advanced. Good luck with your project!

[vorticalbox]

4 hours ago, Terrorjoekel said:

That's great, you might want to keep this in mind for the future. Doing CSS manually is a pain sometimes. Auto Responsiveness with nice animations without trouble whatsoever can be of use when things get more advanced. Good luck with your project!

It's not just a pain is a massive waste of time and money. No one hard codes CSS by hand and if they want custom they use something like SAAS. That said hard coding is a great way to learn css and will help you out when you need to start tweaking things.