Category Archives: CSS

Scroll Spy (Fixed footer)

Use  fixed on mobile could cause wrong position for unknown reason. Change value of “position” property should be the best solution.

 

Align text to bottom of a div

Use flex:

CSS:

Reference:

Sticky (Fixed) Column of a table

 

Bootstrap Modal Issues

Width:

If the width of modal is too wide, check the following possible reasons:

  • If there is any long text string is not broken to new line.
  • Image width without max-width
  • iframe (e.g. embeded youtube video)

CSS Issues in iphone

如果不是RWD,Fixed Menu會沒辦法完整顯示

Solution: 用JS判斷window寬度,把fixed改成static

iPhone會自動調整文字的大小,有時候內文的字型會比標題還大

Solution:

 

table-cell will cause weird padding of a td

In table, if the CSS value of “display” is “table-cell”, and a image within, there will be a weird padding under the image. Refer to the green lines:

https://jsfiddle.net/RexLo/1hdxob6s/1/

Solution:

Set the display value of the image to “block”:

Reference:

body overflow issue

body overflow hidden, 要附加 -webkit-overflow-scrolling: touch, 不然手機看會以為壞掉了,卡卡的

figure 不是取代 image tag,在這裡使用image就好