Reference blog

Category: CSS

  • Easy Fancybox: Solution for Iframe no-scroll issue in mobile

    Source: https://alucard-blog.blogspot.sg/2016/06/how-to-fix-fancy-boxeasy-fancybox.html

    How to fix fancy box scroll not working in mobile. Using wordpress plugin https://wordpress.org/plugins/easy-fancybox/

    In Easy Fancybox, you will see these 2 lines in the jquery.fancybox-1.3.7.js: (do a folder search for id=”fancybox-content” to get better idea of how it looks like)

    <div id=”fancybox-content”……..>
    <iframe id=”fancybox-frame” name……………

    Apply to fancybox-content, not fancybox-frame

    So in your custom/child theme CSS, it should be:

    #fancybox-content{
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    }

  • CSS: Media queries for mobile, tablet display devices

    In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

    Suggested breakpoints

    Source: http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

    @media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480×320 phones (Android) */ }
    @media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
    @media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800×480 phones (Android) */ }
    @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
    @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
    @media (min-width:1281px) { /* hi-res laptops and desktops */ }

    Refined to work better with 960 grids:

    @media (min-width:320px) { /* smartphones, iPhone, portrait 480×320 phones */ }
    @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
    @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800×480 or 854×480 phones */ }
    @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
    @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
    @media (min-width:1281px) { /* hi-res laptops and desktops */ }

    Managing multiple styles by linking to different stylesheets using media queries

    Source: http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

    Adding all the styles in the same CSS file is acceptable for the above example, but for a full-fledged website, it will become a pain to manage the code. That is why I prefer to link a new stylesheet for specific screen sizes. The way to do that is to use the media attribute of the link tag.

    <link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”mobile-device.css” />

    Now you can define all the mobile specific styles in the mobile-devices.css file.

    Google Mobile SEO guideline

    Source: https://developers.google.com/webmasters/mobile-sites/mobile-seo/

    Mobile: In this document, “mobile” or mobile devices refers to smartphones, such as devices running Android, iPhone, or Windows Phone. Mobile browsers are similar to desktop browsers in that they can render a broad set of the HTML5 specification, although their screen size is smaller and in almost all cases their default orientation is vertical.

    Tablets: We consider tablets as devices in their own class, so when we speak of mobile devices, we generally do not include tablets in the definition. Tablets tend to have larger screens, which means that, unless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser rather than on a smartphone browser.

    Based on the above, I would be inclined to set tablets to load the same CSS version as desktop since this should not penalize SEO rankings.

  • HTML/CSS: Styling form buttons

    source: http://jsfiddle.net/2RYyD/

    Great example there but if you’re styling the button which is a form submit button, remember to change the button type to “submit” instead or the variables won’t get posted.

    <div class=”button”>
    <input type=”button” value=”TELL ME MORE” onClick=”document.location.reload(true)”>
    </div>

    .button input[type=”button”]{
    color:#08233e;
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
    font-size:70%;
    padding:14px;
    background:url(overlay.png) repeat-x center #ffcc00;
    background-color:rgba(255,204,0,1);
    border:1px solid #ffcc00;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border-bottom:1px solid #9f9f9f;
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    cursor:pointer;
    display:block;
    width:100%;
    }

    .button input[type=”button”]:hover{background-color:rgba(255,204,0,0.8);}