Jump to content

Wildfiregames.com Mobile


Recommended Posts

I found the first problem.

the padding and the height, I'm not familiar with "em"

display : black? can be ...

 

1TThn2T.png

these codes give an idea isn't have a properly mobile version in the HTML.

the HTML can call CSS style in some cases.

Edited by Lion.Kanzen
Link to post
Share on other sites

The em haven't great difference in this matter. Because you can use px= pixels. I'm more familiar with that.

The padding

CSS Padding Properties

The CSS padding properties are used to generate space around content.

The padding properties set the size of the white space between the element content and the element border.

http://www.w3schools.com/css/

Edited by feneur
Removed distracting formatting
Link to post
Share on other sites

http://www.w3schools.com/css/css_display_visibility.asp

 

display...

The display property is the most important CSS property for controlling layout.


The display Property

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Edited by feneur
Removed distracting formatting
Link to post
Share on other sites

Ok, now have more questions...

the white text is fine, because is a head or header. Is a menu.

but the dark text invades the space.

the white text are stalled/fix in that proportion :1em

im try to remember my multimedia class, my teacher warning to us about these situations.

especially with fix/stall ...and the use of CSS code in PC vs use a mobile version.

About dimensions.

http://www.w3schools.com/css/css_dimension.asp

 

Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

Edited by feneur
Removed distracting formatting
Link to post
Share on other sites

now I can compare, with my PC browser (Firefox).

94tBtq0.png

the head works fine...

I will have a look to a HMTL...

the HTML looks some basic at this point.

Spoiler

 

it do not have many conventions code like "lang" or meta


<meta charset="UTF-8">
<html lang="en-US">

http://www.w3schools.com/html/html_headings.asp

 

Quote

 

Declaring a language is important for accessibility applications (screen readers) and search engines.

Omitting <html> or <body> can crash DOM and XML software.

Omitting <body> can produce errors in older browsers (IE9).

 

 

 

qwy2k4E.png

Edited by Lion.Kanzen
Link to post
Share on other sites
6 hours ago, Lion.Kanzen said:

The em haven't great difference in this matter. Because you can use px= pixels. I'm more familiar with that.

Everybody is more familiar with px, but it is bad practice to define sizes with pixels, because it makes it harder for the user to change. For example, if I can't see very well, I might want to make the fonts bigger - if fontsize is defined with px instead of em, ex or %, this gets much harder, especially if I'm using an old browser. Of course, margins and paddings aren't that important for legibility ;)

Edited by GunChleoc
Link to post
Share on other sites

The links should now display even on smaller screens. It's not a perfect solution (as it takes up a bit more screen space than necessary, the address bar does disappear when you scroll down anyway, so it's not as bad as it might seem from this screenshot), but it works, and we didn't feel like redesigning the web page at the moment. We will keep it in mind for the future though.

Screenshot_2016-03-14-22-35-04.thumb.png

Link to post
Share on other sites
On 3/12/2016 at 10:33 PM, Lion.Kanzen said:

I found the first problem.

the padding and the height, I'm not familiar with "em"

display : black? can be ...

 

1TThn2T.png

these codes give an idea isn't have a properly mobile version in the HTML.

the HTML can call CSS style in some cases.

I'm sorry to be rude, but you have no idea what you are talking about. :-)  Display block (not black) is perfectly valid.  It is in fact the default display style the div element.  Setting it makes other elements behave like div's do.  And as noted above, 'em' is a very valid unit of measurement.  It is relative to the font size used on the page.  Meaning, if the user configures a larger font in their browser, the whole page scales accordingly.  For accessibility this is recommended.

There were two problems, both fixed.

One was that the element that contains the logo & menu, had a fixed height.  Since the elements inside it are floated, they can float outside the height of the element.  The height was removed and an element was added below that clears both left and right.  That solves that.

That added the problem that whenever the elements are compressed and take up more space, the height of header increases, but the content keeps the same top margin, thus falling under the header element.  I fixed that by giving the content a top margin depending on browser width.

On 3/11/2016 at 2:22 AM, wowgetoffyourcellphone said:

Wildfiregames.com does not seem to render good on Chrome mobile. Only bad part is links at top of page. Thank you. 

Thank you for letting us know! :-)

  • Like 1
Link to post
Share on other sites
1 hour ago, Lion.Kanzen said:

Sorry I mean  block, but just I can't editing that, Im not sure why. For me isn't important I don't use mobile version but I have some class about create webs but isn't my strong point as designer, only I share my knowledge.

I create websites and web applications for a living. :-)  Keep up the good work.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...