Blue underline and responsive image

Issue

I’m a newbie at coding and I have some questions. I hope someone can help me figure out what I did wrong.
I have an image under a text. When the browser it’s 100 % width it looks like it should be. When I resize the browser in order to see if it’s responsive, the image don’t move the same time with text and it stay on the middle of the page. The text it’s fully responsive, everything looks just fine, but this image it’s driving me crazy. What can I do to see the image under the text when I resize the browser ?

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Alco - Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <link rel="stylesheet" type="text/css" href="css/webflow.css">
  <link rel="stylesheet" type="text/css" href="css/alcotemplate.webflow.css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ["Montserrat:400,700","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic"]
      }
    });
  </script>
  <script type="text/javascript" src="js/modernizr.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico">
  <link rel="apple-touch-icon" href="images/webclip-slate.png">
</head>
<body>
  <header class="navbar">
    <div class="w-container">
      <div class="w-row">
        <div class="w-col w-col-4 w-clearfix">
          <img class="logo" src="images/logo.png" alt="53a187e6c2e6cb0d0ecbc4a3_logo.png">
        </div>
        <div class="w-col w-col-8 nav-column"><a class="nav-link" href="#">Home</a><a class="nav-link" href="#page-nav-share">About</a><a class="nav-link" href="#">Portfolio</a><a class="nav-link" href="#">Blog</a><a class="nav-link" href="#">Contact</a>
        </div>
      </div>
    </div>
  </header>
  <section class="w-container">
    <h4>Blog</h4>
      <img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget quam orci.</p>
  </section>
  <div class="w-container container">
     <div class="blog">
        <div class="border">
          <img class="scale-with-grid" src="images/blogpost.png" />
             <h5><a href="blog-post.html">Neque porro quisquam est qui lorem ipsum.</a></h5>
    <h3>Our Team</h3>
    <img class="image" src="images/Untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_Untitled-1.png">
    <p>At vero eos et accusamus et iusto</p>
  </div>
  <div class="section grey footer"></div>
  <img src="images/footer.png" alt="53a425b2eaa4a69a21bd719e_footer.png">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/webflow.js"></script>
  <!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>

Would be highly appreciated if someone can help me.
Look forward to hear from you.

Solution

As you don’t provide any code it’s hard to help you out…
However, about your Text link with blue color and underline, you can change all your link visuals with css like so:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Answered By – Takoyaro

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.