[resolved] making site responsive with @fontface (px + rem) - resizing problems (6 posts)

  1. lostincodingspace
    Posted 3 years ago #

    I'm using the twenty-twelve theme to rebuild my site to be more responsive and I have a twofold problem, mostly with IE. I hate it personally but 1/3 of my traffic uses it and I don't think it's nice to tell brides (I'm an event planner) to pick anther browser since their's blows. Doing my website is something I (usually) enjoy but I am no professional.

    The problems:

    1) Internet explorer will - a) load my header text using @fontface and place a black box around the header image (which shouldn't be there) or will b)
    not load @ff and not place black box around image. ???

    @font-face {
        font-family: Alex;
        src: url('fonts/AlexBrush-Regular-OTF-webfont.eot');
        src: url('fonts/AlexBrush-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/AlexBrush-Regular-OTF-webfont.woff') format('woff'),
             url('fonts/AlexBrush-Regular-OTF-webfont.ttf') format('truetype'),
             url('fonts/AlexBrush-Regular-OTF-webfont.svg#Alex') format('svg');
        font-weight: normal;
        font-style: normal;

    No black boxes in code.

    And 2) Since this site is to be responsive I would like the font to resize appropriately. Any suggestions for having the header font resize for iPhone? I'm using 32px, 2.27 rem.

    Thanks in advance.

  2. lostincodingspace
    Posted 3 years ago #

  3. lostincodingspace
    Posted 3 years ago #

    Fixed the font-resizing problem (I hope) by adding a different style definition for media screens with max-width of 800px.

    Is 800px a good number to use to distinguish between a phone screen and a larger media/computer screen?

  4. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Best way of knowing would be if you test this on e.g. http://mattkersley.com/responsive/


  5. lostincodingspace
    Posted 3 years ago #

    Thank you, hopefully I made the changes to make that work.

    Any ideas about the @ff/black box duo?

  6. lostincodingspace
    Posted 3 years ago #

    figured that one out - had to add

    a img {
    border: 0;
    text-decoration: none;

    although all other css had border:none or border: 0.

Topic Closed

This topic has been closed to new replies.

About this Topic