Skip to main content


Forum Replies Created

Viewing 15 posts - 226 through 240 (of 240 total)
  • Author
  • in reply to: Browser font re-sizing kills web layout #206135


    chrome has separate controls for zoom and font size… I was changing just the font size, so that should be what the OP was meaning right?

    It looks like the font size control in chrome influences the default font size of a webpage. Therefore, it will affect any fonts not set to an explicit pixel height.

    check out this pen:

    and change the font-size in chrome. You’ll see that only the text without px font-sizing will change.

    in reply to: [Solved] Fluid And Responsive Image Gallery #178148


    elkroke, have you tried using masonry.js?

    Its normally used for organizing items of differing sizes into a grid, but theres no reason you couldn’t use it in your situation, if everything else has failed. Browser support is very good (ie8+ , all modern browsers)

    edit: I feel like the isFitWidth option in masonry might be what you need…
    An Anonymous Pen via @CodePen

    in reply to: First Website Version 1 #178018


    I like the over-all design, but you’ve just coded it in a very overly complex and inflexible way.

    I think you should at least change all those 1400px width divs to 100%, on any window larger than that you’ll get a white bar all the way down the right side, and any window smaller will create a horizontal scroll bar.
    plus to center any element within those divs you can just use margin-left:auto; margin-right: auto;

    there’s alot of other places where the code should probably be re-worked a bit…

    I think the only place the typography doesn’t work is in the nav bar. I like raleway as well, but in this instance, I don’t think it works so well bold, in all caps.

    I feel like the logo is readable as long as it’s over the dark grey area of the background photo.

    umm, minor point but maybe “news” should be renamed “recent work”?

    I think what chrisburton meant by unnecessary images are those instance where you’re using an image when css or html would suffice. For example, in your contact paragraph, instead of using an image to create the border, you could just give the paragraph a border in your css.


    I chdecked it out with the developer tools in chrome, and the main issue is coming from the “margin-left: 25%;” you have in the css for the menu ul. Also, that’s why you’re getting that horizontal scroll bar.

    You should remove that, now to center everything there’s probably a few ways to go about it, but I think the least disruptive (to your existing code) way to go about it would be to change the following in your css:

    margin-left: auto;
    margin-right: auto
    width: auto;
    width: auto;
    /* reme,ber to remove the margin-left: 25%; here!*/

    now, you’ll also need to create different css for the menu to accommodate screens under 480px wide, as the total menu length is wider than the containing div at that point. You could either shrink the menu text size and padding, or you could change the display style so that they stack.

    well I hope that helps a little… what you see in chrome’s dev tools don’t always 100% reflect the code in the actual css file so I’m not totally sure how your code looks.

    in reply to: Transform into a business card #177125


    Hi Matt I came up with this:
    An Anonymous Pen

    It might be a different effect than what you were going for, but it looked like you wanted the circle to appear as if it was flipping over to the “back” side? So that’s the effect I tried to create…

    Also I’m using content: "" in the css to write the text which you may or may not be ok with… you could probably finagle something with <figure><figcaption> but just using content seemed more straight forward if maybe not semantic.

    in reply to: Interesting design conundrum #176932


    Yeah that issue was brought up recently… We’re still weighing the different options, but right it looks like I’ll end up doing one of two things:

    1. applying a different class to the large photos so that their quotes don’t overlap anything.
    2. My client might be ok with the quotes covering other people’s photos (just not the photo to the person to whom the quote belongs). This is how it’s currently set-up on their website, so its an option, though maybe not ideal for them. It would eliminate the issue of things flying around the screen though…
    in reply to: Moving DIV on click #175572


    I think the most straight forward way to do this is just to create a slide show with the three videos embedded in it.

    look into using either:
    the anythingslider
    the flexslider

    then you can just embed the videos into the slider like so:

    <div class="yoursliderclass">
              <ul class="slideclass">
    <embed width="x" height="x"
    <embed width="x" height="x"
    <embed width="x" height="x"

    Hope that helps!

    in reply to: trouble with $_SERVER["REQUEST_URI"] #173589


    I used
    instead of

    and its returning the proper url now!

    I really have no idea why that’s returning the url correctly… maybe it has something to do with my server? I dunno.. at least its functioning the way I need it to :)

    in reply to: trouble with $_SERVER["REQUEST_URI"] #173493


    Here is the code for the body of my document:

    The php script is right below the facebook javascript, and I’m echoing out the url in the ordered list lower down the code

    <body >
    window.fbAsyncInit = function(){
        appId: 'xxxxx', status: true, cookie: true, xfbml: true }); 
    (function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];if   (d.getElementById(id)) {return;}js = d.createElement('script'); = id; js.async = true;js.src = "//" + (debug ? "/debug" : "") + ".js";ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));
    function postToFeed(title, desc, url, image){
    var obj = {method: 'feed',link: url, picture: ''+image,name: title,description: desc};
    function callback(response){}
    FB.ui(obj, callback);
    function curPageURL() {
    $url = ('http://').$_SERVER["SERVER_NAME"].$port.basename( $_SERVER['REQUEST_URI'] );
    return $url;
    <div id="footer_body">
    <div class="container" >
      <div class="footerbg">
      <div id="footerleft" class="eight columns"><a href="#">Back to top &raquo;</a><br /><br /><a href="#">Contact us</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">About us</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">News</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Conferences</a><br /><br /><span class="footercopy">Affiliated Engineers, Inc. &copy; 2014</span>
     <div id="footerright" class="eight columns">
     <ul class="social">
     <li><a href="javascript:if(window.print)window.print()"><span class="aeicon icon-printer"></span></a></li>
     <li><a href=""><span class="aeicon icon-mail" ></span></a></li>
     <li><a href=""  data-count="none"><span class="aeicon icon-twitter" ></span></a></li>
     <li><a href="<?php
      echo curPageURL();
    ?>&title=Click%20here&summary=Add%20summary&"><span class="aeicon icon-linkedin" ></span></a></li>
      <li><a href="" data-image="" data-title="" data-desc=""  class="btnShare"><span class="aeicon icon-facebook" ></span></a></li>
    </div><!--end container-->
    elem = $(this);
    postToFeed('title'),'desc'), elem.prop('href'),'image'));
    return false;
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>  

    I’m not very proficient with php, so I have no idea if I’ve implimented it correctly or not…

    I don’t follow you on the error logs… I don’t know how to view php errors, or are you looking for errors found with the w3c validator?

    in reply to: trouble with $_SERVER["REQUEST_URI"] #173200


    If you hover over the linkedin button (in the footer) and look at the url that pops up in the bottom of the browser window, you’ll notice that it reads:

    where as it should read:

    which leads me to believe that some how the code isn’t retrieving the full url, or its only echoing out the root folder for some reason?

    in reply to: [Solved] Trouble with animated svg in Chrome #172431


    oh, snap, just figured it out, apparently chrome didn’t like:

    to {
        stroke-dashoffset: 0;

    so I changed it to:

    100% {
        stroke-dashoffset: 0;

    and its working!

    Thanks for your help :)

    in reply to: [Solved] Trouble with animated svg in Chrome #172428


    edit: I forgot to add the vendor prefixes to .path. after I did that I
    added a fill color change to the animation and interestingly that works in both chrome and firefox, but chrome still doesn’t play the stroke animation…

    in reply to: [Solved] Trouble with animated svg in Chrome #172416


    hmm… even though the codepen you posted works in chrome, I still can’t get the animation to play when I put it into an html file like so:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    body {
      //background-color: red;
    .path {
      stroke-dasharray: 99%;
      stroke-dashoffset: 2500;
      animation: dash 16s linear forwards infinite;
    .path stroke {
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
    <title>Untitled Document</title>
    <svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
         width="375.086px" height="103.605px" viewBox="0 0 375.086 103.605" enable-background="new 0 0 375.086 103.605"
    <polygon class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="81.573,82.564 81.562,18.029 61.719,18.026 17.484,82.493 
        37.361,82.501 65.108,42.064 65.108,66.055 65.099,66.056 54.72,66.056 54.748,82.564 "/>
    <rect class="path" x="90.533" y="18.057" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="39.876" height="16.452"/>
    <rect class="path" x="90.544" y="42.033" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="39.876" height="16.454"/>
    <rect class="path" x="90.539" y="66.135" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="39.876" height="16.454"/>
    <rect class="path" x="139.599" y="18.062" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="16.452" height="64.492"/>
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M185.093,24.78h0.083l3.709,11.823h-7.627L185.093,24.78z
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M207.252,47.972h-5.813V29.966h-3.209V25.79h3.209v-1.787
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M219.129,47.972h-5.813V29.966h-3.209V25.79h3.209v-1.787
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M230.672,25.785v22.188h-5.813V25.785H230.672z M230.672,23.154
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M240.174,47.972h-5.813V18.035h5.813V47.972z"/>
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M249.676,25.785v22.188h-5.813V25.785H249.676z M249.676,23.154
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M265.493,40.02c0,2.672-2.634,4.333-5.224,4.333
        c-1.127,0-2.715-0.623-2.715-2.657c0-2.408,1.795-2.948,3.967-3.321c2.424-0.374,3.386-0.748,3.972-1.204V40.02z M271.18,31.652
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M281.038,25.791h3.627v4.176h-3.627V42
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M290.936,34.666c0.334-2.896,1.795-4.637,4.551-4.637
        c1.882,0,4.179,1.077,4.513,4.637H290.936z M299.747,41.45c-0.459,1.575-2.129,2.403-3.758,2.403c-4.72,0-5.054-3.729-5.222-5.389
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M313.355,37.045c0-3.485,1.248-6.767,4.949-6.767
        c3.988,0,4.986,3.57,4.986,7.099c0,3.279-1.455,6.353-5.154,6.353C314.396,43.728,313.355,39.66,313.355,37.045z M328.855,18.035
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M193.54,57.952h-15.88v6.262h14.584v5.303H177.66v7.762h16.586
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M216.811,82.583H211V69.135c0-1.622-0.084-4.37-3.793-4.37
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M224.918,71.597c0-5.129,2.422-6.708,4.596-6.708
        c3.256,0,5.01,2.908,5.01,6.483c0,3.034-1.002,6.401-4.969,6.401C226.086,77.776,224.918,74.436,224.918,71.597z M234.73,60.396
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M249.297,60.396v22.188h-5.813V60.396H249.297z M249.297,57.765
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M272.863,82.583h-5.813V69.135c0-1.622-0.084-4.37-3.793-4.37
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M280.639,69.276c0.334-2.898,1.795-4.637,4.551-4.637
        c1.881,0,4.179,1.074,4.513,4.637H280.639z M289.45,76.061c-0.459,1.573-2.13,2.401-3.759,2.401c-4.719,0-5.053-3.729-5.221-5.387
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M302.85,69.276c0.334-2.898,1.797-4.637,4.553-4.637
        c1.88,0,4.177,1.074,4.511,4.637H302.85z M311.663,76.061c-0.459,1.573-2.129,2.401-3.759,2.401c-4.721,0-5.055-3.729-5.221-5.387
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M319.896,60.396h5.563v3.821h0.084
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M346.795,67.177c-0.25-1.412-1-2.91-3.908-2.91

    I also tried including the svg as <object> and as with the same results (animation only works in firefox)

    Is there an issue with my doctype or <html> or something of that nature? or does chrome just not like svg animated through css? (I’ve only ever seen it working in chrome through codepen…)

    in reply to: [Solved] Trouble with animated svg in Chrome #172334


    Here’s a codepen:

    A Pen by Captain Anonymous on CodePen.


    in reply to: [Solved] Help with font icons #172088


    omg thank you so much for catching that!
    … I don’t know how those weird quotes got in there but I probably would have never noticed it!

Viewing 15 posts - 226 through 240 (of 240 total)
icon-link icon-logo-star icon-search icon-star